轮播图

第一步先获取dom节点：


//得到carousel

var carousel = document.getElementById("carousel");

//得到li

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;
        //滚动速度
        var animatetime = 600;
        //缓冲描述
        var tween = "Linear";
        //间隔时间
        var interval = 2000;

第三步按钮监听

var idx = 0;
        
        //右按钮的监听
        rightBtn.onclick = function(){
            //函数截流
            if(lis[idx].isanimated) return;

            //原来的信号量的图片淡出
            animate(lis[idx],{"opacity" : 0},animatetime,function(){
                //信号量改变
                idx++;
                if(idx > imgLength - 1){
                    idx = 0;
                }
                //新信号量的图片淡入
                animate(lis[idx],{"opacity" : 1},animatetime);
                changeCircle();
            });         
        }
        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();
        }

第四步小圆点监听

//批量添加小圆点的监听
        for(var i = 0 ; i <= imgLength - 1 ; i++){
            circlesLi[i].index = i; //先编号
            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(){
            //去掉所有小圆点的cur
            for (var i = 0; i < circlesLi.length; i++) {
                circlesLi[i].className = "";
            }
            //第信号量这个小圆点加cur
            circlesLi[idx].className = "cur";
        }

推荐阅读更多精彩内容