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

你好，我正在尝试为我正在制作的网站制作一个滑块。我已经做了一个“切换器”来改变内容，但没有任何动画。我希望它看起来像滑块上。我已经做的工作正在进行中

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>

Hejsa 1
HEJSA2
Hejsa 3
HEJSA4
Hejsa 5
下一个
以前的

我的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();
    });
});

$（文档）.ready（函数（）{
var元素=document.querySelector（'meta[property=“slider count”]”）；
var content=element&&element.getAttribute（“数据”）；
对于（变量i=1；i内容）{
currentSlide=1；
}否则{
currentSlide=nextSlide；
}
$（“.slider-”+currentSlide.show（）；
});
$（“.previous”）。单击（函数（）{
$（“.slider-”+currentSlide.hide（）；
var nextSlide=currentSlide-1；
if（nextSlide<1）{
当前幻灯片=内容；
}否则{
currentSlide=nextSlide；
}
$（“.slider-”+currentSlide.show（）；
});
});

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

我几乎改变了一切：

• 我删除了整个

  .show（）

  和

  .hide（）

  行为
• 我添加了一些CSS以显示一行上的所有面板，但隐藏了除一个幻灯片对象以外的所有内容：

• 我添加了第一个

  .slider对象
  

• 我添加了更多的变量，使代码更具可读性，并通过使用

  $（'.slider object'）.length计算
  .slider object
  ，消除了对meta标记的需要

• 我将

  #slider object

  更改为

  .slider object

  ，因为您不应该对文档中多次出现的对象使用ID
• 我将

  content

  重命名为

  totalSlides

• 我做了一些其他的事情，只是看看小提琴

您提到的网站是一个很好的例子，它使用了一种不同的方法来完成这一切，即

transform:translate3d（）哪一个更好更干净，但更复杂，我只有在完成本文后才看到这一点。因此，欢迎大家使用
transform:translate3d（）复制它：）

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

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

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