轮播图

作者: 向北_f098 | 来源:发表于2017-10-10 19:48 被阅读0次

鼠标进入停止

carousel.onmouseover = function(){
            clearInterval(timer);
        }

鼠标离开开始

~~~ carousel.onmouseout = function(){
        timer = setInterval(rightBtnHandler,interval);
    }~~~

按钮的监听

    ~~~rightBtn.onclick = 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();
    }~~~

小圆点的监听

    ~~~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(){
        for (var i = 0; i < circlesLi.length; i++) {
            circlesLi[i].className = "";
        }
        circlesLi[idx].className = "cur";
    }~~~

相关文章

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 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/vxebyxtx.html