html5结合JavaScript实现龙播图

最新推荐文章于 2024-02-04 09:49:23 发布

原创最新推荐文章于 2024-02-04 09:49:23 发布 · 652 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html5

html5 同时被 2 个专栏收录

28 篇文章

订阅专栏

javaScript

19 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现网页上的动态图片轮播效果，并结合导航栏提供用户交互体验。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
#nav_1{
    height: 80px;
    background-color: transparent;;
    position: relative;
    top: -100px;
    left: 10px;
    width: 1400px;
}
#ul_1{
    margin-left: 955px;
}
#ul_1 li{
    list-style: none;
    float: left;
    width: 80px;
    background-color: blueviolet;
    margin-left: 1px;
    height: 80px;

}

#ul_1 li a{
    line-height: 80px;
    font-family: inherit;
    font-size: 50px;
    padding-left: 40px;
}
</style>
<body>
<script>

var imgs=["img/1.png","img/2.png","img/3.png","img/4.png","img/5.png",];
var num=["1","2","3","4","5"];
var index=0;
var time=0;
function change(){
        index++;
        document.getElementById("li"+(index-1)).style.backgroundColor="blueviolet";

        if(index>4  ){
            index=0;
        }
        document.getElementById("li"+(index)).style.backgroundColor="rgba(100,0,0,255)";
        document.getElementById("img_1").src=imgs[index];
        time=setTimeout(change,2000);
    }
    change();
document.getElementById("img_1").onmouseover= function () {
    clearTimeout(time);
}
document.getElementById("img_1").onmouseout= function () {
    time=setTimeout(change,2000);
}
var ops="";
for(var i=0;i<num.length;i++){
    ops=ops+"<li id='li"+i+"' onmouseover='gaibian(this)' onmouseout='back(this)' value='"+i+"'>"+"<a >"+num[i]+"</a>"+"</li>"
}
document.getElementById("ul_1").innerHTML=ops;

function gaibian(obj){
    clearTimeout(time);
    document.getElementById("img_1").src=imgs[obj.value];
}
function back(obj){
    time=setTimeout(change,2000);
}
</script>

<div>
    <img id="img_1" src="img/1.png">
</div>
<div class="div_1">
    <nav id="nav_1">
        <ul id="ul_1">
            <li id="li0"></li>
            <li id="li1"></li>
            <li id="li2"></li>
            <li id="li3"></li>
            <li id="li4"></li>
        </ul>
    </nav>
</div>
</body></html>