Question

我在一个容器div中包含了几个div个元素，我想通过它们滑动，一次只显示一个，并在一定时间后滑动当前可见的div使用动画向左移动，然后在右边的下一个div中滑动。

我的HTML看起来像这样：

<div id="topMaps" style="height: 225px; overflow: hidden;">
  <div>First slide - some content here</div>
  <div>Second slide - some content here</div>
  <div>... slide - some content here</div>
  <div>n'th slide - some content here</div>
</div>

我正在使用以下脚本：

var currentSlide = 1;
var numSlides = -1;
var slideSpeed = 1000;
var timePerSlide = 3500;

function nextSlide() {
    $('#topMaps div:nth-child(' + currentSlide + ')').hide("slide", { direction: "left" }, slideSpeed);
    currentSlide += 1;
    if (currentSlide >= numSlides)
        currentSlide = 1;
    $('#topMaps div:nth-child(' + currentSlide + ')').show("slide", { direction: "left" }, slideSpeed);

    setTimeout(nextSlide, timePerSlide);
}

$(document).ready(function() {
    numSlides = $('#topMaps div').length;
    setTimeout(nextSlide, timePerSlide);
});

但它不起作用。首次调用nextSlide函数时，Firefox会报告以下错误：

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
http://localhost/templates/front/default/js/jquery.js
Line 19

当我在Firebug的Watch面板中添加$('#topMaps div:nth-child(' + currentSlide + ')')时，它会返回10个元素的集合？ Reall不确定发生了什么。

也许有人可以帮助我？

编辑我发现了选择器的问题，我需要使用$('#topMaps>div:nth-child(' + currentSlide + ')')（请注意>）。它仍然没有工作。

Answer 1

虽然不是您想要的答案，您是否考虑过使用Cycle Plugin？

Answer 2

我可能建议为每个div设置一个ID并在nextSlide（）js函数中调用它，测试currentSlide变量并选择下一个div 这不是一个好的编程方法，但你至少可以让它工作，直到你弄清楚$（'＃topMaps div：'nth-child（'+ currentSlide +'）'）的错误。

在jQuery中创建幻灯片（不是图像）

2 个答案: