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

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

   //设置图片下标
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);
      });*/

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


没仔细瞅代码,说下逻辑

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

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

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

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

【热门文章】
【热门文章】