html5结合JavaScript实现龙播图

最新推荐文章于 2022-10-08 14:42:12 发布

九

最新推荐文章于 2022-10-08 14:42:12 发布

阅读量563

点赞数

分类专栏： javaScript html5 文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_31301099/article/details/50224647

版权

html5 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

javaScript

19 篇文章 0 订阅

订阅专栏

<!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").οnmοuseοver= function () {
    clearTimeout(time);
}
document.getElementById("img_1").οnmοuseοut= function () {
    time=setTimeout(change,2000);
}
var ops="";
for(var i=0;i<num.length;i++){
    ops=ops+"<li id='li"+i+"' οnmοuseοver='gaibian(this)' οnmοuseοut='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>

九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5结合JavaScript实现龙播图

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
复制链接

扫一扫

专栏目录