js做的轮播图

 

 

 

 

 

 

以下那些注释呢,都是要靠自己理解才是最重要的,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .banner{width: 800px;height: 300px;margin: 0 auto;position: relative;}
            .banner img{width: 100%;height: 100%;}
            ul{position: absolute;left: 45%;transform:translate(-50%,0);bottom: 15px;list-style: none;}
            li{float: left;width: 30px;height: 30px;background:rgba(0,0,0,.5);border-radius: 50%;text-align: center;line-height: 30px;font-weight: bold;margin-right:10px ;}
            #zleft,#yright{width:0px;position: absolute;top: 0;line-height: 300px;font-size: 80px;font-weight: bold;color: white;background: rgba(255,255,255,0.3);overflow: hidden;transition: 0.8s;}
            #zleft{left: 0;}
            #yright{right: 0;}
        </style>
    </head>
    <body onload="dong()"><!--进入页面先行加载某个函数-->
        <div class="banner">
            <img src="img/t0.jpg" />
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <div id="zleft"><</div>
            <div id="yright">></div>
        </div>
        
        <script>
            //获取所有需要的东西;
            var banner=document.getElementsByClassName("banner")[0];
            var lis=document.getElementsByTagName("li");
            var zleft=document.getElementById("zleft");
            var yright=document.getElementById("yright");
            var imgs=document.getElementsByTagName("img")[0];
            
            var timer=setInterval("dong()",1000);        //给图片定时,让图片按定时器秒数动;
            var index=-1;                                //给图片给初始值; 
                function dong(){
                    index++;  
                    resetColor();                              //5.调用函数  
                    lis[index].style.backgroundColor="yellow";//4.给轮播点做选中状态
                    imgs.src="img/"+"t"+index+".jpg";    //1.获取图片路径
                    if(index==3){                        //3.判断关键节点,最后一张与第一张的关联;
                        index=0;
                    }
                                                //2.路径循环
                }
                function resetColor(){                     //5.创建一个函数(清楚上一个轮播点的状态)
                    for(var i=0;i<lis.length;i++){
                        lis[i].style.backgroundColor="rgba(255,255,255,.3)"
                    }
                }
//                btn点击
                for (var i=0;i<lis.length;i++) {  //1.循环轮播点
                lis[i].onclick = function(){             //2.给轮播点做点击
                    clearInterval(timer);//5.清楚名为timer的定时器
                    index = this.innerHTML-1;    //3.当前下标等于页面中的数字;注意:后面的减一;
                    imgs.src = "img/"+"t"+index +".jpg";//4.获取图片路径
                    resetColor();//6.获取上面的,清楚上一个轮播点的状态的函数
                    lis[index].style.background = "yellow"//6.清楚函数的样式

                    }
                }
    //            鼠标悬浮banner            
                banner.onmouseover = function(){//1.鼠标放到banner上的时候
                    clearInterval(timer);  //3.清楚定时器
                    zleft.style.width = yright.style.width = "60px";  //2.两边按钮出现;这里要注意,上面设置按钮宽度的时候,给宽设置为0px
                }
                banner.onmouseout = function(){//1.鼠标离开banner上的时候
                    timer = setInterval("dong()",1000);//3.恢复轮播动
                    zleft.style.width = yright.style.width = "0px";//2.两边按钮消失
                }
                zleft.onclick = function(){//左边按钮点击
                    index--;
                    if (index ==-1){//最后一张,与第一张之间的衔接
                        index = 3;
                    }
                    resetColor()//获取清楚轮播点的函数
                    lis[index].style.background ="yellow"
                    imgs.src = "img/"+"t"+index+".jpg";//获取图片路径
                }
                yright.onclick = function(){
                    index++;
                    if (index == 4){
                        index = 0;
                    }
                    resetColor()
                    lis[index].style.background = "yellow"
                    imgs.src = "img/"+"t"+index+".jpg";
                }
        </script>
    </body>
</html>