在jQuery中爲滑塊製作幻燈片動畫

Question

您好，我正在嘗試爲我製作的網站製作滑塊。我已經做了一個「切換器」來改變內容，但沒有任何動畫。我希望它看起來像this website上的滑塊。我已經完成的工作是在this website。

JS中的變量「content」來自HTML中的元標記（不在此處）。在這個例子中它被設置爲五。

我的HTML代碼如下所示：

<div class="slider"> 
    <div id="slider-object" class="slider-1 active"> 
     <div class="content"> 
      <h3>Hejsa 1</h3> 
      <a href="#">Shop</a> 
     </div> 
     <div class="slider-img"> 
      <img src="http://placehold.it/400x400" alt="pic"> 
     </div> 
    </div> 
    <div id="slider-object" class="slider-2"> 
     <div class="content"> 
      <h3>Hejsa 2</h3> 
      <a href="#">Shop</a> 
     </div> 
     <div class="slider-img"> 
      <img src="http://placehold.it/400x400" alt="pic"> 
     </div> 
    </div> 
    <div id="slider-object" class="slider-3"> 
     <div class="content"> 
      <h3>Hejsa 3</h3> 
      <a href="#">Shop</a> 
     </div> 
     <div class="slider-img"> 
      <img src="http://placehold.it/400x400" alt="pic"> 
     </div> 
    </div> 
    <div id="slider-object" class="slider-4"> 
     <div class="content"> 
      <h3>Hejsa 4</h3> 
      <a href="#">Shop</a> 
     </div> 
     <div class="slider-img"> 
      <img src="http://placehold.it/400x400" alt="pic"> 
     </div> 
    </div> 
    <div id="slider-object" class="slider-5"> 
     <div class="content"> 
      <h3>Hejsa 5</h3> 
      <a href="#">Shop</a> 
     </div> 
     <div class="slider-img"> 
      <img src="http://placehold.it/400x400" alt="pic"> 
     </div> 
    </div> 
    <button class="next" type="button">Next</button> 
    <button class="previous" type="button">Previous</button> 
</div> 

我的JS代碼如下所示

$(document).ready(function() { 
    var element = document.querySelector('meta[property="slider-count"]'); 
    var content = element && element.getAttribute("data"); 

    for (var i = 1; i <= content; i++) { 
     if ($(".slider-"+i).hasClass("active") === false) { 
      $(".slider-"+i).hide(); 
     } else { 
      var currentSlide = i; 
     } 
    } 

    $(".next").click(function() { 
     $(".slider-"+currentSlide).hide(); 
     var nextSlide = currentSlide+1; 
     if (nextSlide > content) { 
      currentSlide = 1; 
     } else { 
      currentSlide = nextSlide; 
     } 

     $(".slider-"+currentSlide).show(); 
    }); 
    $(".previous").click(function() { 
     $(".slider-"+currentSlide).hide(); 
     var nextSlide = currentSlide-1; 
     if (nextSlide < 1) { 
      currentSlide = content; 
     } else { 
      currentSlide = nextSlide; 
     } 

     $(".slider-"+currentSlide).show(); 
    }); 
}); 

Answer 1

所以你是一個很好的例子中提到的網站使用了完全不同的方法：除了顯示和隱藏面板，它只是「將它們移出視線」。我測試了一下週圍，並能複製相同的行爲：

JSFiddle

我變了，好了，幾乎一切：

• 我取出全部.show()和.hide()行爲。
• 我加了一些CSS顯示在一行上所有的面板卻隱藏着一切，但一個幻燈片對象：

。

.slider { 
    display: inline-block; 
    white-space: nowrap; 
    width: 400px; 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
} 

.slider-object { 
    display: inline-block; 
} 

• 我添加了動畫的加法和減法的margin-left - 值第一.slider-object

的。

$('.slider .slider-object:first-of-type').animate({ 
    marginLeft: (currentSlide - 1) * (step * -1) + 'px' 
}); 

• 我增加了一些變數，使代碼更易讀，並通過計算除去元標記的需要.slider-object與$('.slider-object').length;
• 我改變#slider-object到.slider-object，你不應該使用的ID在文檔中出現多次的對象
• 我將其更名爲content至totalSlides。
• 我做了一些其他的東西，只是看看小提琴。

你作爲一個很好的例子中提到的網站使用不同的方法來做到這一切，與transform: translate3d();，這是更好和更清潔更復雜，我認爲這只是現在當我完成這個文本。所以，歡迎大家用transform: translate3d(); :)