Javascript实现图片轮播:(三)前后按钮控制的实现!

图片轮播在上一篇文章中实现了图片序列的效果,其实已经算是一个完整的效果了.但是有时候,我们可以发现很多的图片轮播有前后按钮的控制.在这篇文章里我们就完成图片轮播的第三步.

HTML,CSS代码不做任何的修改.如果需要的话,可以给前后按钮一个Hover状态的效果.这样会更友好.

好了,我们继续下面的分析.

控制前后按钮我们首先值得要考虑的就是图片索引位置的改变,我们代码里面使用的是index,所以需要对index--或者index++.

接着就得对index做越界的考虑. 做好判断后,其他的容易了,改变景色(UL)的显示位置,然后改变图片序列的状态.

最好还要考虑清除setInterval,否则就会出现跳转乱套.在鼠标移出前后按钮后也得清除.这里主要是逻辑考虑是否周全.

主要就是这三步的考虑.

//前后控制
  var prev = slider.getElementsByClassName("prev")[0];
  var next = slider.getElementsByClassName("next")[0];
  
  prev.onclick = function () {
      clearInterval(jumpindex, 0, 0);
      index--;
      if (index < 0 ) {
          index = len - 1 ;
      }
      console.log( index )
      imgul.style.left = - (800 * index) + "px";
      for (var i = 0; i < len; i++) {
          numlinks[i].setAttribute("class","", 0, 0);
      }
      numlinks[index].setAttribute("class","active", 0, 0);
  }
  prev.onmouseout = function () {
      clearInterval(jumpindex, 0, 0);
      jumpindex = jump(, 0, 0);
  }
  next.onclick = function () {
      clearInterval(jumpindex, 0, 0);
      index++;
      if (index >= len) {
          index = 0;
      }
      imgul.style.left = - (800 * index) + "px";
      for (var i = 0; i < len; i++) {
          numlinks[i].setAttribute("class","", 0, 0);
      }
      numlinks[index].setAttribute("class","active", 0, 0);
  }
  next.onmouseout = function () {
      clearInterval(jumpindex, 0, 0);
      jumpindex = jump(, 0, 0);
  }

OK,整个图片轮播的功能效果完成了. 读懂之后,就可以对代码做优化了,还有就是可以封装成一个图片轮播的插件,方便自己的使用,还可以对代码做动态处理,比如图片序列根据图片的数目来生成,跳转时间的动态控制,跳转不仅仅是图片,还是可以一个景色布局(LI里面还可以是其他图文或者媒体等等内容),加入响应式处理... 随大家意.