轮播图的设置:

 

轮播图的大致思路 :

　　1.首先设置好图片的移动方式就是设置一个动画函数  是匀速还是缓动  

　　2.封装好函数之后 一般设置的时候是根据定时器实现的,如果是匀速的话 设置的步长便是固定的 不放在定时器中.如果是缓动的话 step不是固定 要放在定时器之内  进行每次改变.

　　3,根据是焦点还是简单的可以求出target值  然后调用函数就可以了 

定时器

定时器相当于一个循环 只要是定时器function里面的代码都会循环执行 只不过循环是根据时间来设置的

清除定时器是 clearInterval(timeID)

let tiemID;
timeID = setInterval(function(){
        //需要不断执行的代码
},20)   //20代表的是20毫秒 指的是20秒  代码区的内容执行一次
clearInterval(timeID)  //清除定时器

设置moveAnimation函数:

通过要移动的元素以及要移动的位置结合定时器 起到让元素(匀速来回)移动的效果

来回的效果是根据step的正负决定的

function moveAnimation(elm,target){
    //1.首先清除定时器  //为了防止重读点击的时候加快了速度
    clearInterval(elm.timeID)
    //2.获取当前元素的位置
    position = elm.offsetLeft;
    //3.设置步长step  进行判断  
        // 如果元素位置小于目标位置 元素需要继续前进  所以step是正数
        // 如果元素位置大于目标位置  元素需要后退  所以step是负数
    let step = (target - position) > 0 ? 10 : -10;
    // 4.设置定时器 
        //定时器的作用就是为了让元素的位置每次加上步长进行改变 直到达到目标位置停止 
    elm.timeID = setInterval(function(){
        // 5.让元素的当前位置每次都加上step进行移动  step有正有负  所以移动的方向是不确定的
        // 需要注意的是 position没有px单位  也没有赋值给当前元素的elm.style.left
        position += step;
        // 6.需要进行判断元素的当前位置与目标位置之间的距离是否是否大于步长?
            // 如果距离大于步长  让元素继续正常移动  直接讲position+"px"赋值给elm.style.left
        if (Math.abs(target-position) > Math.abs(step)){
            elm.style.left = position + "px";
        }else{
            // 如果不大于的话 直接讲目标位置的值赋值给elm.style.left 并且停止定时器 不在移动元素
            elm.style.left = target + px;
            clearInterval(elm.timeID)
        }
        
    },20)
}

简单轮播图的大致思路

简单轮播图的思路是 :

1.首先找出 移动元素 以及按钮 还有图片的宽度

2.使用for循环给每一个按钮设置点击事件

3.每一个按钮需要设定一个索引值

索引值的作用是 可以根绝每张图片的宽度 移动到对应图片需要的px距离 也就是每个按钮的目标target

4.调用封装好的moveAnimation() 传入移动元素以及元素对应要移动的距离就可以了

简单轮播图的重点是找到每个按钮的对应要移动的目标位置

 

焦点轮播图的大致思路

1.首先得到 移动元素 按钮 还有图片宽度

2.在设置点击事件之前 需要设置一个点击次数

点击次数的作用为了结合图片的宽度 求出每次点击需要移动的距离

3.点击之后需要判断一下

如果是点击左键的话 需要判断是 点击次数是否大于0 如果是的话 就让点击次数减1 并且将target的值等于 点击次数* 图片宽度 若是等于0的话 那就是直接 target = 0*图片宽度

 leftBtn.onclick = function() {
        if (clickCount > 0) {
          clickCount--;
        }
        let target = -clickCount * moveWidth;
        moveAnimation(ulBox, target);
      };

如果点击的是右键的话 需要判断的是 点击次数是否是小于4 如果是的话 就让点击次数加1 并且将target的值等于点击次数图片宽度 如实等于4的话 直接讲target的值设置为 4 图片宽度

rightBtn.onclick = function() {
        if (clickCount < 4) {
          clickCount++;
        }
        let target = -clickCount * moveWidth;
        moveAnimation(ulBox, target);
      };

4 将移动的元素以及target传入 moveAnimation()中就可以了

焦点轮播图的重点是设置点击次数 向左或者向右的时候判断点击次数 从而确定每次点击需要移动的px

 

简单焦点轮播图的大致思路

1.分别设置好简单轮播图的设置 以及焦点轮播图的设置

2.在完成简单轮播的设置之后 需要关联焦点轮播图

通过将点击元素的索引值赋值给点击次数就可以了

焦点轮播图也需要关联简单轮播

     // 重要操作
          

//将点击次数直接等于开始设置的那个索引值就可以了
          clickCount = this.getAttribute("index");

完成焦点轮播图之后 首先清空一下简单轮播图的选中状态 然后根据点击次数找到图片对象的那个点击对象 设置被选中的状态就可以了

//点击左右键的时候需要先将下面被选中的数字清空
 //再根据点击次数找到图片对应的对象 设置被选中的状态
for (let i = 0; i < spanArr.length; i++) {
            spanArr[i].removeAttribute("class");
          }
          spanArr[clickCount].setAttribute("class", "current");
        };

 

自动无缝轮播图的大致思路

图片摆放需要在首尾设置同一个图片

直接这是一个定时器 这个定时器不需要清除

定时器内获取当前元素的位置 还要设置步长 也就是每次移动的距离

定时器每次执行的时候 都进行判断 当前元素是不是小于了 前几个元素的总和px 如果是的话 讲elm.style.left直接设置为0 px 如果不是的话 那就继续行 将position的值赋值给elm.style.left 就可以了

主要是图片的摆放 需要首尾一样 再之后进行判断 是否超出了前几个图片的px和 超出之后直接讲当前元素的坐标改成0就可以了 没有的话 就正常赋值执行

 

焦点与简单轮播图的区别:

　　设置的target是包裹图片的父盒子中的每个图片的最左边的坐标 也可以理解成让对应图片显示的坐标

　　简单轮播图是根据具体的点击对象设置的索引值 然后根据索引值找到每次点击之后需要移动的父盒子的px值

　　焦点轮播图 是根据具体对点击次数设找到每次点击后移动的target

简单焦点轮播图的关联性

　　主要是根据简单轮播图中的索引值改变点击次数 根据焦点轮播图中的点击次数改变简单中的点击事件的选中状态

完整版轮播图:

　　将简单 焦点 无缝相结合进行设置 需要注意几点就是

　　1.在简单事件绑定中 需要将每个数字按钮的设置的索引值 赋值给焦点中的点击次数

for (let i = 0; i < numArr.length; i++) {
        // 给每一个数字按钮绑定index 0 1 2 3 4
        numArr[i].setAttribute("index", i);
        numArr[i].onclick = function () {
          for (let j = 0; j < numArr.length; j++) {
            numArr[j].removeAttribute("class");
          }
          let target = moveWidth * -this.getAttribute("index");
          moveAnimation(ulBox, target);
          this.setAttribute("class", "current");
          clickCount = this.getAttribute("index");  // 赋值
        };
      }

2.在焦点事件中

首先要复制第一个图片元素 添加到末尾 起到一个无缝接的效果

其次 点击之后需要判断 点击次数:

如果是左键 就要判断是都是第0下 如果是的话 将点击次数改成后补元素的点击次数 然后根据次数将显示的图片改成最后一个的图片 效果上看不出来有过更改 但是确实最后一个 最后关联数字按钮的话根据点击次数找到对象的按钮 进行操作

leftBtn.onclick = function () {
        if (clickCount == 0) {
          clickCount = 5;
          ulBox.style.left = -clickCount * moveWidth + "px";
        }
        clickCount--;
        let target = -clickCount * moveWidth;
        moveAnimation(ulBox, target);
        for (let i = 0; i < numArr.length; i++) {
          numArr[i].removeAttribute("class");
        }
        numArr[clickCount].setAttribute("class", "current");
      };

如果是右键的话 就要判断是不是最后一个替补元素的点击次数 如果是的话 直接修改成0次 同时需要更改图片的显示 换成第一个显示 在进行关联数字按钮的时候 需要判断一下 因为右键显示的图片的点击次数跟左键不一样 是从第二个图片到替补图片 类似12345没有0 只要不是最后一个的正常通过点击次数可以找到对应的数字按钮 如果是最后一个话 就需要同0来找到

rightBtn.onclick = clickRight;
      function clickRight() {
        if (clickCount == 5) {
          clickCount = 0;
          ulBox.style.left = "0px";
        }
        clickCount++;
        let target = -clickCount * moveWidth;
        moveAnimation(ulBox, target);
        for (let i = 0; i < numArr.length; i++) {
          numArr[i].removeAttribute("class");
        }
        if (clickCount < 5) {
          numArr[clickCount].setAttribute("class", "current");
        } else {
          numArr[0].setAttribute("class", "current");
        }
      }

3 设置不断循环的时候 最好是将右键设置为一个函数 在定时器中不断进行执行就可以了