0

我有几个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 + ')')在 Firebug 的 Watch 面板中添加时，它会返回 10 个元素的集合？真的不知道发生了什么。

也许有人可以帮助我？

edit I figured out the problem with the selector, I needed to use $('#topMaps>div:nth-child(' + currentSlide + ')') (notice the >). It's still not working though.

4

2 回答 2

1

While not the answer you were wanting, have you considered using the Cycle Plugin?

于 2009-09-10T09:02:41.210 回答
0

I might recommend setting an ID for each div and calling it in the nextSlide() js function,test the currentSlide variable and choose the next div It's not a good programming thingy but you can at least make it work till you figure out what's wrong with $('#topMaps div:nth-child(' + currentSlide + ')')

于 2009-09-10T09:06:57.490 回答