轮播图分步解析

轮播图的html

        

            
            
        
        

            

                
![](images/0.jpg)
                
![](images/1.jpg)
                
![](images/2.jpg)
                
![](images/3.jpg)
                
![](images/4.jpg)
            
        
        

            

                

                

                

                

                

            
        
    

CSS

        *{
            margin: 0;
            padding: 0;
        }
        .carousel{
            width: 560px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #333;
            position: relative;
        }
        .carousel ul{
            list-style: none;
        }
        .carousel ul li{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter:alpha(opacity = 0);
        }
        .carousel ul li.first{
            opacity: 1;
            filter:alpha(opacity = 0);
        }
        .btns a{
            position: absolute;
            width: 40px;
            height: 40px;
            top: 50%;
            margin-top: -20px;
            background-color: orange;
            font-size: 30px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            font-weight: bold;
            cursor: pointer;
            z-index: 999;
        }
        .btns a:hover{
            background-color: gold;
        }
        .leftBtn{
            left: 10px;
        }
        .rightBtn{
            right: 10px;
        }
        .circles{
            position: absolute;
            width: 150px;
            height: 16px;
            bottom: 10px;
            right: 10px;
        }
        .circles ol{
            list-style: none;
        }
        .circles ol li{
            float: left;
            width: 16px;
            height: 16px;
            background-color: orange;
            margin-right: 6px;
            border-radius: 50%;
            cursor: pointer;
        }
        .circles ol li.cur{
            background-color: red;
        }

第一步、获取元素（DOM操作）

        var carousel = document.getElementById("carousel");
                //获取到最外面的div
        var lis = document.getElementById("imageslist").getElementsByTagName("li");
        //获取到的轮播图片
        var leftBtn = document.getElementById("leftBtn");
        //获取到左边按钮
        var rightBtn = document.getElementById("rightBtn");
        //获取到右边按钮
        var circlesLi = document.getElementById("circles").getElementsByTagName("li");
        //获取到轮播图下面的小圆点
        var imgLength = lis.length;
        //获取到轮播图片数
        var width = 560;
        //定义每张图片的宽度为560px
        var animatetime = 300;
        //每张图片的运动时常
        var tween = "Linear";
        //tween为缓冲运动“Linear为匀速运动”
        var interval = 2000;
        //每间隔2000毫秒轮播一次
        var idx = 0;
        //idx为传入的信号量

第二步、创建改变图片透明度的函数 rightBtnHandler

function rightBtnHandler(){
            //函数截流
            if(lis[idx].isanimated) return;
            //将当前图片淡出
            animate(lis[idx],{"opacity" : 0},1000);
            //信号量改变
            idx++;
            if(idx > imgLength - 1){
                idx = 0;
            }
            //将下一张图片淡入
            animate(lis[idx],{"opacity" : 1},1000);
            //调用改变小圆点的函数
            changeCircle();
        }

第三步、创建定时器让轮播图自动轮播

var timer = setInterval(rightBtnHandler,interval);
        //创建了一个名为timer的定时器让图片每interval(2000)毫秒轮播一次
        carousel.onmouseover = function(){
            clearInterval(timer);
        }
        //鼠标进入最外层div时轮播停止
        carousel.onmouseout = function(){
            timer = setInterval(rightBtnHandler,interval);
        }
        //鼠标离开最外层div时轮播继续

第四步、通过小圆点改变轮播图片

for(var i = 0 ; i <= imgLength - 1 ; i++){
            circlesLi[i].index = i; 
            //将i值保留在第i个小圆点的index属性里
            circlesLi[i].onclick = function(){
                //截流
                if(lis[idx].isanimated) return;
                //原来的信号量的图片淡出
                animate(lis[idx],{"opacity" : 0},1000);
                //信号量改变
                idx = this.index;
                //新信号量的图片淡入
                animate(lis[idx],{"opacity" : 1},1000);
                //调用改变小圆点的函数
                changeCircle();
            }
        }

第五步、通过排他来让小圆点的样式改变

function changeCircle(){
            //先让所有的小圆点的className为空颜色为黄色
            for (var i = 0; i < circlesLi.length; i++) {
                circlesLi[i].className = "";
            }
            //让当前的小圆点的className为cur颜色为红色
            circlesLi[idx].className = "cur";
        }

第六步、通过左右按钮改变轮播图片

        rightBtn.onclick = rightBtnHandler;
        //由于右按钮与轮播函数rightBtnHandler相同所以可以直接引用
        //左按钮与右按钮基本相同只不过是让图片递减显示
        leftBtn.onclick = function(){
            //函数截流
            if(lis[idx].isanimated) return;
            //原来的信号量的图片淡出
            animate(lis[idx],{"opacity" : 0},1000);
            //信号量改变
            idx--;
            if(idx < 0){
                idx = imgLength - 1;
            }
            //新信号量的图片淡入
            animate(lis[idx],{"opacity" : 1},1000);
            //调用改变小圆点的函数
            changeCircle();
        }