创造一个幻灯片在jQuery(不像)

StackOverflow https://stackoverflow.com/questions/1404175

  •  05-07-2019
  •  | 
  •  

题

我有几个 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

当我加入 $('#topMaps div:nth-child(' + currentSlide + ')') 在看板在萤火，返回收的10元?完全不知道这是怎么回事。

也许有人可以帮我吗？

编辑 我想出这个问题的选择，我需要用 $('#topMaps>div:nth-child(' + currentSlide + ')') (注意 >).它仍然没有工作。

有帮助吗？

解决方案

虽然不是答案你是想，你有没有考虑使用 周期的插件?

其他提示

我可能会建议设置一个ID每个div并呼吁它在nextSlide()js功能、试验的currentSlide变和选择下一个div 这不是一个很好的编程的东西但你至少可以使其工作，直到你弄清楚什么是错的美元('#topMaps div:n-儿童('+currentSlide+')')

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top