轮播图

            //得到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 = 300;
        //缓冲描述
        var tween = "Linear";
        //间隔时间
        var interval = 2000;
  • animate函数是动画封装函数
  • @para0 elem参数就是运动的对象
  • @para1 targetJSON参数就是运动的终点状态,可以写px,也可以不写px
    {
    "left": 500,
    "top": 600
    }
  • @para2 time是运动总时间,毫秒为单位
  • @para3 tweenString缓冲描述词,比如"Linear",可选
  • @para4 callback是回调函数,可选
  • return 本函数没有返回值
    */
function animate(elem , targetJSON , time , tweenString , callback)
//左按钮的监听
        leftBtn.onclick = function(){
            
            // 一点击就会执行此函数。 如果我点击非常快,
            //    比如0.5秒一次, 那么函数将会 每个0.5秒执行1次
            //  为了解决动画没有完成,就执行下一次的问题,必须做点事情
            //     标记 当前是否是在动画过程中

            //  对象.isanimated   标记: 如果为true,说明它正在执行动画
            
            // 对象.xxx    undefined   假的

            //函数截流
            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";
        }
apply()的作用
var a = {"name": "Jack"}

// apply 可以传递参数,让函数中的this变成传入的参数
// c.apply(a);
//c拥有与a一样的属性。
// 3. 与apply非常相似
c.call(oBox);

你可能感兴趣的:(轮播图)