Создание слайд-шоу в jQuery (не изображения) - PullRequest
Новая
       11

Создание слайд-шоу в jQuery (не изображения)

0 голосов
/ 10 сентября 2009

У меня есть пара 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, он возвращает коллекцию из 10 элементов? Не уверен, что происходит.

Может быть, кто-то может мне помочь?

edit Я выяснил проблему с селектором, мне нужно было использовать $('#topMaps>div:nth-child(' + currentSlide + ')') (обратите внимание на >). Это все еще не работает, хотя.

Ответы [ 2 ]

1 голос
/ 10 сентября 2009

Несмотря на то, что вы не хотели получить ответ, рассматривали ли вы возможность использования Cycle Plugin ?

0 голосов
/ 10 сентября 2009

Я мог бы рекомендовать установить идентификатор для каждого элемента div и вызвать его в функции nextSlide () js, протестировать переменную currentSlide и выбрать следующий элемент div Это не очень хорошая вещь для программирования, но вы можете, по крайней мере, заставить ее работать, пока не поймете, что не так с $ ('# topMaps div: nth-child (' + currentSlide + ')')

...