水平滚动旋转木马

Question

我制作了旋转木马。在其中使用scrollLeft()。你可以看到它在CODEOPEN LINK

// For show/hide arrows button. 
     carousel.scroll(function() { 
      var i = carousel.scrollLeft(); 
      var w = carousel.width(); 
      console.log(i+'='+w); 

      if (i == w) { 
       next.fadeOut(400); 
      } else { 
       next.fadeIn(400); 
      }; 
      if (i == 0) { 
       prev.fadeOut(400); 
      } else { 
       prev.fadeIn(400); 
      }; 
     }); 

我的问题是，当页面在全宽（1200像素），它工作正常，但是当我调整浏览器，scrollLeft()返回不同的值。您可以在console.log中查看值。

我预计当scrollLeft()到达末尾下一个按钮被隐藏。但是，当宽度小于1200px它没有所需的行为。

Answer 1

你的代码有几个问题。这表明像swipeleft和swiperight这样的功能没有定义，因为您可以在您的codepen控制台中看到它。 另一件事是，你第一次没有隐藏以前的元素。在加载时，您的幻灯片始终处于0位置，因此无需保持始终，并且休息时间可以正常工作。 你可以在这里看到我的小提琴：https://jsfiddle.net/or8pege7/2/和正确的代码。

var slide = $("#slide"); 
     var carousel = $("#wrapper-slide"); 
     var next = $("#next-btn-carousel"); 
     var prev = $("#prev-btn-carousel"); 

    // For show/hide arrows button. 
     carousel.scroll(function() { 
      var i = carousel.scrollLeft(); 
      var w = carousel.width(); 
      /*console.log(w); 
      console.log(i);*/ 
      if (i == w) { 
       next.fadeOut(400); 
      } else { 
       next.fadeIn(400); 
      }; 
      if (i == 0) { 
       prev.fadeOut(400); 
      } else { 
       prev.fadeIn(400); 
      }; 
     }); 

    //For action next. 
     function goNext() { 
      var i = carousel.scrollLeft(); 
      var w = carousel.width(); 
      console.log(i+'='+w); 
      carousel.animate({ 
       scrollLeft: (i += w) 
      }, 1000, "swing"); 
     }; 
     if(carousel.scrollLeft()==0){ 
      $('#prev-btn-carousel').hide(); 
     } 

     next.click(function() { 
      goNext(); 
     }); 

     /*carousel.swipeleft(function(){ 
      goNext(); 
     });*/ 

    //For action prev. 
     function goPrev() { 
      var i = carousel.scrollLeft(); 
      var w = carousel.width(); 
      console.log(i+'='+w); 
      carousel.animate({ 
       scrollLeft: (i -= w) 
      }, 800, "swing"); 
     }; 

     prev.click(function() { 
      goPrev(); 
     }); 

     /*carousel.swiperight(function(){ 
      goPrev(); 
     });*/ 


     carousel.on("dragstart", function(e) { 
      e.preventDefault(); 
     });