轮播图的实现（上）

来源：互联网发布：淘宝优惠券短链接生成编辑：程序博客网时间：2024/06/05 22:46

上部分实现的功能是：三张图片自动循环播放，这其中没有任何动画，只有简单的隐藏和显示。当鼠标点击其中任何一张自动播放停止，鼠标可以点击任何一张图片。鼠标移开相关区域，又自动开始播放。
出现的问题：
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

轮播图的实现（上）

banner{

banner img{

banner ul {

banner ul li{

banner span{

banner strong{