轮播图的实现（上）

最新推荐文章于 2022-05-29 15:51:31 发布

霹雳弦惊

最新推荐文章于 2022-05-29 15:51:31 发布

阅读量288

点赞数

分类专栏：基础知识 javascript html5 css

本文链接：https://blog.csdn.net/qq_33501079/article/details/78011335

版权

基础知识同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

上部分实现的功能是：三张图片自动循环播放，这其中没有任何动画，只有简单的隐藏和显示。当鼠标点击其中任何一张自动播放停止，鼠标可以点击任何一张图片。鼠标移开相关区域，又自动开始播放。
出现的问题：
js代码中有两个定时器，我对两个定时器返回的值都赋给了同一个变量
。这就导致了发生鼠标事件后会发生很多莫名其妙的问题。这一点值得注意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="lbq.css">
    <script type="text/javascript" src="lbq.js" rel="script"></script>
    <title>轮播器</title>
</head>
<body>
    <div id="banner">
        <img src="images/icon1.JPG" alt="风景1">
        <img src="images/icon2.JPG" alt="风景2">
        <img src="images/icon3.JPG" alt="风景3">
        <ul id="UL">
            <li>●</li>
            <li>●</li>
            <li>●</li>
        </ul>
        <span></span>
        <strong>风景1</strong><!--左小角的提示信息-->
    </div>
</body>
</html>

css代码
`#body{
margin: 0px;
}
ul li{
text-decoration: none;
list-style-type: none;
}

width: 620px;
height: 400px;
position: absolute;
margin: 0px 350px;

}

width: 620px;
height: 400px;
position: absolute;
display: none;

}

color: #999;
top: 370px;
margin: 0px 250px;
z-index: 3;
cursor: pointer;
position: absolute;

}

float: left;
font-size: 20px;
padding: 0 5px;

}

top: 370px;
width:620px;
height: 30px;
background: #333;
opacity:0.5;
position: absolute;
z-index: 1;

}

top:370px;
width: 100px;
height: 30px;
left: 10px;
float: left;
color: white;
padding: 5px 0;
font-size: 16px;
font-family: 宋体;
position: absolute;

}
`

js代码

window.onload = function () {
    var img = document.getElementsByTagName("img");//得到图片的集合
    var li = document.getElementsByTagName("li");
    img[0].style.display = "block";
    var this_index = 1,flag=1;
    var sett,sett_one,_this_index=-1;
    sett=setInterval( function () {
        if(this_index>li.length-1) this_index = 0;
        li[this_index].style.cssText="color:red";
        img[this_index].style.display = "block";
        document.getElementsByTagName("strong")[0].innerHTML = img[this_index].alt;
        for(var j=0;j<li.length;j++){
            if(j!=this_index){
                img[j].style.display = "none";
                li[j].style.color="#999";
            }

        }
        this_index++;
        console.log("1");
    },1000);

    for (var i=0;i<li.length;i++){
        li[i].index = i;//设置li[i]的小标
        img[i].index = i;
        //设置点击事
        li[i].onclick=function () {
            this_index-=1;
            li[this_index].style.color = "#999";
            clearInterval(sett);

            _this_index = this.index;
            if(_this_index!=-1){
                li[_this_index].style.color="#999";
            }
           li[this.index].style.color="red";
           img[this.index].style.display = "block";
           this_index = i;
            document.getElementsByTagName("strong")[0].innerHTML = img[this.index].alt;
           for(var j=0;j<li.length;j++){
               if(j!=this.index){
                   img[j].style.display = "none";
               }
           }
        }
        //鼠标移出事件
        li[i].onmouseout = function () {
            li[this.index].style.color="#999";
            clearInterval(sett_one);
           //鼠标移出事件
           sett_one=setInterval( function () {
                if(_this_index >2) _this_index = 0;
                else if(0<=_this_index && _this_index<2 && flag) _this_index+=1;
                else if(_this_index!=-1) this_index = _this_index;
                flag=1;
                li[_this_index].style.color="red";
                img[_this_index].style.display = "block";
                document.getElementsByTagName("strong")[0].innerHTML = img[_this_index].alt;
                for(var z=0;z<li.length;z++){
                    if(z!=_this_index){
                        img[z].style.display = "none";
                        li[z].style.color="#999";
                    }

                }
                if(_this_index===2){
                    _this_index=0;
                    flag =0;
                }
            },1000);
        }
    }
}

霹雳弦惊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图的实现（上）

上部分实现的功能是：三张图片自动循环播放，这其中没有任何动画，只有简单的隐藏和显示。当鼠标点击其中任何一张自动播放停止，鼠标可以点击任何一张图片。鼠标移开相关区域，又自动开始播放。出现的问题： js代码中有两个定时器，我对两个定时器返回的值都赋给了同一个变量。这就导致了发生鼠标事件后会发生很多莫名其妙的问题。这一点值得注意。<!DOCTYPE html><html lang="en">
复制链接

扫一扫