Question

您好我正在尝试为我正在制作的网站制作滑块。我已经做了一个＆＃34;切换器＆＃34;改变内容，但没有任何动画。我希望它看起来像this website上的滑块。我已经完成的工作是this website。

变量＆＃34;内容＆＃34;在JS中是来自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

因此，您提到的网站作为一个很好的例子使用了一种完全不同的方法：它不是显示和隐藏面板，而是将它们移出视图＆＃34;。我测试了一下，可以重现相同的行为：

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();重现它：）

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

1 个答案: