自动轮播事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        img{
            width: 500px;
            height: 330px;
        }
        #outer{
            width: 520px;
            height: 330px;
            margin: 50px auto;
            background-color: yellowgreen;
            padding: 10px 0;
            position: relative;
          /* 裁剪溢出部分 */
            overflow: hidden;
        }
        #imgList{
            list-style:none;
            position: absolute;
        }
        #imgList li{
            float: left;
            margin: 0 10px;
        }
        #navDiv{
            position: absolute;
            bottom: 15px;
        }
        #navDiv a{
            float: left;
            width: 15px;
            height: 15px;
            background-color: red;
            margin: 0 5px;
            opacity: 0.5;
            /* 兼容ie8*/
            filter:alpha(opacity=50);
        }
        #navDiv a:hover{
            background-color: yellow;
        }
    </style>
    <script type="text/javascript" src="tools.js"></script>
    <script type="text/javascript">
        window.onload=function () {
            var timer;

            var imgList=document.getElementById("imgList");
            var imgAll=document.getElementsByTagName("img");
            imgList.style.width=520 *imgAll.length+"px";
            //设置导航居中
            var navDiv=document.getElementById("navDiv");
            var outer=document.getElementById("outer");
            navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
            //默认图片索引
            var index=0;
            //获取所有的a元素超链接
            var allA=document.getElementsByTagName("a");
            //设置默认选中效果
            allA[index].style.backgroundColor="blue";

            for (var i=0;i<allA.length;i++){
                //为每一个超链接添加一个属性
                allA[i].num =i;
                //为超链接绑定单机响应函数
                allA[i].onclick=function () {
                    //点击时停止自动轮播
                    clearInterval(timer);
                   //获取点击超链接的索引，并将其设置为index
                    index=this.num;
                    //切换图片
                    // imgList.style.left=-520*index+"px";
                    move(imgList,"left",-520*index,10,function () {
                        autoChange();
                    });
                    //修改正在选中的a
                    setA();
                }
            };
            //自动切换图片
            autoChange();
            function setA() {
                //判断是否是最后一张图片
                if(index>=imgAll.length-1){
                    index=0;
                    imgList.style.left=0;
                }
                //遍历所有的a使之变为红色
                for (var i=0; i<allA.length;i++) {
                    allA[i].style.backgroundColor="";
                };
                allA[index].style.backgroundColor="blue";
            }

            function autoChange() {
                //开启定时器
               timer=setInterval(function () {

                    index++;
                    index%=imgAll.length;
                    move(imgList,"left",-520*index,20,function () {
                        setA();
                    })

                },1000)
                
            }
        }
    </script>
</head>
<body>
<!--//创建外部div，来做大容器-->
<div id="outer">
    <ul id="imgList">
        <li><img src="img01.jpeg"/></li>
        <li><img src="img03.jpeg"/></li>
        <li><img src="img02.jpeg"/></li>
        <li><img src="img01.jpeg"/></li>
    </ul>
    <!--创建导航按钮-->
    <div id="navDiv">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>

    </div>
</div>
</body>
</html>
猜你喜欢
