轮播图

作者: 丶澎嘭嘭憉 | 来源:发表于2017-10-10 21:07 被阅读0次
            //得到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);

相关文章

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步,得到元素 第二步,设置...

  • 现金红包

    每日红包 轮播图 详情图 周末红包 轮播图 详情图 圣诞红包 轮播图 详情图

  • day7_作业

    轮播图1 轮播图2

  • [iOS]定制性强的广告轮播图--SCAdView

    @[无限轮播图] @[3D轮播图] @[广告轮播图] SCAdView Statement If my code ...

  • 普通奖品

    卡西欧小方块 轮播图 详情图 三只松鼠大礼包 轮播图 详情图 天猫精灵 轮播图 详情图 小米蓝牙无线耳机 轮播图 ...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • 多轮播图的设计

    列表展示多个轮播图 多个轮播图同时显示 多个轮播图不定时进行轮播动画 对应呈现的关系:1个TableView、一个...

网友评论

      本文标题:轮播图

      本文链接:https://www.haomeiwen.com/subject/qtvbyxtx.html