Question

您好我使用带有prev和next按钮的jQuery制作了一个img滑块。滑块自动前进，下一个按钮也可以工作，但是上一个按钮很难...这里有一个指向jsfiddle的链接，因为它有点长：

...和强制性片段：

var sliderCentral = {                             

  nextImage: function(d) {
          var index = currIndex + d;

          if (index <= 0) {       
            index = totalImg;       
          };
          if (index >= totalImg) {        // totalImg = 4
            index = 0;
          };
          currIndex = index;   
          $slider.fadeIn(500);  
  },

我已经评论了我认为问题所在。这应该是一个快速修复（对于知道他们正在做什么的人）...任何帮助？

提前致谢，

-D

Answer 1

这是解决方案：Jsfiddle link

       nextImage: function (d) {  
          var index = currIndex + d;

          if (index < 0) {
              index = totalImg - 1;
          }
          else if (index >= totalImg) { // totalImg = 4
              index = 0;
          }

          //console.log(index);             // see what happens 
          currIndex = index;
          var Img = imgArr[currIndex]; // looky here??            
          $slider.attr("src", Img);
          $slider.fadeIn(100);
      },
      forwardsGo: function () {

          $slider.fadeOut(100, function () {
              sliderCentral.nextImage(1);
          });
      },

      backwardsGo: function () {

          $slider.fadeOut(100, function () {
              sliderCentral.nextImage(-1);
          });
      },

Answer 2

推进和延迟currIndex存在一些问题。

     forwardsGo: function() {                  

            $slider.fadeOut(500, function () {              
            var nextIndex = (currIndex+1 > totalImg)?0:currIndex+1;  //new
            var currentImg = imgArr[nextIndex];        //amended          
                $slider.attr("src", currentImg);             
                sliderCentral.nextImage(1);                   
            });  
      },

      backwardsGo: function() {

            $slider.fadeOut(500, function () {
            var prevIndex = (currIndex-1 < 0)?totalImg:currIndex-1; //new 
            var prevImg = imgArr[prevIndex];    //amended            
                $slider.attr("src", prevImg);  
                sliderCentral.nextImage(-1);                              
            }); 
      },
....

请参阅：http://jsfiddle.net/moob/5TsL6/4/

通过图像滑块jQuery向后移动

2 个答案: