轮播图

作者: 向北_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";
        }~~~

    相关文章

      网友评论

          本文标题:轮播图

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