在jquery中为滑块制作幻灯片动画

Question

你好，我正在努力为一个我正在制作的网站做一个滑块。我已经做了一个“开关”来改变内容，但没有任何动画。我希望它看起来像本网站上的滑块。我已经做的工作是在本网站上完成的。

JS中的变量"content“来自HTML中的元标记(而不是这个标记)。在本例中，它被设置为5。

我的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-value of the first .slider-object的动画增减。

。

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

• 我增加了一些变量来提高代码的可读性，并通过用.slider-object计算$('.slider-object').length;来消除对元标记的需求。
• 我将#slider-object更改为.slider-object，因为您不应该对文档中多次出现的对象使用in。
• 我将content重命名为totalSlides。
• 我做了一些其他的事情，看看小提琴。

作为一个很好的例子，您提到的网站使用了一种不同的方法来完成所有这一切，使用transform: translate3d(); ，它更好地和更干净，但更复杂，我现在看到只有当我完成这篇文章。因此，欢迎大家使用transform: translate3d(); :)复制它。)