在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(); :)