javascript - 要设计一个可以左右控制的轮播图，在左右控制按钮上不知如何处理逻辑，用的是JQ

Question

   //设置图片下标
var curIndex = 0; 
    var autoChange=setInterval(function(){
        if(curIndex < $('#bannerItem li').length-1){
            curIndex++;
        }else{
            curIndex =0;
        }
        changeTo(curIndex);
    },2500);

    //自动变化
    function changeTo(num){ 
    $("#bannerItem").find("li").removeClass("imgOn").hide().eq(num).fadeIn(1000).addClass("imgOn");
  };
      $('#banner-left').click(function(){
          clearInterval(autoChange);
          changeTo(curIndex-1);
          autoChange=setInterval(function(){
        if(curIndex < $('#bannerItem li').length-1){
            curIndex++;
        }else{
            curIndex =0;
        }
    },2500);
      });

//切换图片
function changeTo(num){ 
    $("#bannerItem").find("li").removeClass("imgOn").hide().eq(num).fadeIn(1000).addClass("imgOn");
  };



//问题在这里
$('#banner-pre').click(function(){
          clearInterval(autoChange);
          changeTo(curIndex-1);
          autoChange=setInterval(function(){
        if(curIndex < $('#bannerItem li').length-1){
            curIndex++;
        }else{
            curIndex =0;
        }
    },2500);
      });
  /*    $('#banner-next').click(function(){
          clearInterval(autoChange);
      });*/

这样的话点击上一张图会卡住不能继续自动播放，再点击会一直停在第一张图,不知道该如何处理

Answer 1

没仔细瞅代码，说下逻辑

1. 监听左右两个按钮事件

2. 获取当前停留图片的index

3. 判断左右按钮哪个被点击相应的index++，或index--
   (注意，此处需判断边界，即停留在第一张图片的时候，点击向左的按钮是要切换到最后一张图片,还是停留在这；停留在最后一张图片的时候同理）

4. 获取index,切换图片，也就是你代码里的changTo函数，此处在加上缓冲效果，可以由css3 translate实现，也可以自己写缓冲函数，jq里的animate函数也行