Создание слайд-шоу в 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 + ')') на панели «Смотреть» в Firebug, он возвращает коллекцию из 10 элементов? Не уверен, что происходит.

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

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

Это было полезно?

Решение

Хотя вы и не нашли ответ, который вы хотели получить, не задумывались ли вы над тем, чтобы использовать плагин Cycle ?

Другие советы

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top