我认为的轮播图

一:大概思路
1. 先吧图片恒方在中央,然后一字排开,第一张图片(下标为0的图片)放在显示框内其余的用 overflow: hidden; 隐藏。
2. 然后用定时器使图片自己移动,在连接两边按钮左右移动。如果图片到了下标为0的图片则从下标为5的图片从后网前播放,(如上)
3.在用小圆点连接图片,下标为0的连接第一个小圆点一直网下。到那张图片他对应的小圆点亮。
二:实操
1. 因为英语啥的不太好,所以简单的东西就不敲了。(如html。css。定义变量啥的)
2.因为图片执行到0或5就没了所以吧它克隆一个在放过来。
克隆步骤:var length = imageLis.length;
魔术手操作:imageUL.appendChild(imageLis[0].cloneNode(true));

3.右边按钮的处理
function rightBtnHandler(){
函数截流:截取目标函数
if(m_unit.isanimated) return;

        信号量的变化
        idx++;

            改变小圆点
        changeCircles();

        轮播图运动机构的移动。
        animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween,function(){
            if(idx > length - 1){
                idx = 0;
                m_unit.style.left = "0px";
            }
        });
    }

4.左按钮(相反)
5.小圆点的运动
小圆点的监听
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].index = i;
circlesLis[i].onclick = function(){
信号量就是自己的序号
idx = this.index;
拉动
animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween);
改变小圆点
changeCircles();
}
}
function changeCircles(){
idx可能是5,但是我们的小圆点下标最大是4,所以用n过渡一下:
var n = idx > length - 1 ? 0 : idx;
排他
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].className = "";
}
circlesLis[n].className = "cur";
}

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