Как пройти через кучу предложений

Question

У меня есть div, который содержит кучу утверждений. Я организовал эти утверждения в списке <ul>, но это может измениться. Как я могу отображать эти утверждения один раз в разном порядке (каждый может каждые 4 секунды). Я также смотрю на кнопку паузы, чтобы удерживать текущую инструкцию на месте, но сначала хочу получить основную информацию.

<div id="statements"> 
    <ul> 
    <li>Statement 1</li> 
    <li>Statement 2</li> 
    <li>Statement 3</li> 
    </ul> 
</div> 

Answer 1

Пример:http://jsfiddle.net/YSPe7/

var statements = $('#statements > ul > li').slice(1).hide().end(); 

var i = 0; 
function rotate() { 
    setTimeout(function() { 
     statements.eq(i).fadeOut(800, function() { 
      i = ++i % statements.length; 
      statements.eq(i).fadeIn(800, rotate); 
     }); 
    }, 4000); 
} 
rotate(); 

В принципе, мы прячемся все, кроме первого утверждения, то ссылки на весь комплект.

Затем мы вызываем функцию rotate(). Внутри функции есть setTimeout(), чтобы вызвать 4-секундную задержку.

Когда код в тайм-ауте выполняется, он выполняет метод fadeOut()^(docs) для оператора с текущим значением i.

fadeOut() имеет обратный вызов, который увеличивает i (или устанавливает его обратно на 0) и выполняет метод fadeIn()^(docs) для этого нового элемента.

.fadeIn() также имеет обратный вызов, который является тем же самым rotate() функцией, которая начинает весь процесс.

---

Если вы не хотите загрязнять пространство имен с i, передать его в качестве аргумента rotate() как это:

Пример:http://jsfiddle.net/YSPe7/1/

var statements = $('#statements > ul > li').slice(1).hide().end(); 

function rotate(i) { 
    setTimeout(function() { 
     statements.eq(i).fadeOut(800, function() { 
      i = ++i % statements.length; 
      statements.eq(i).fadeIn(800, function() { 
       rotate(i); 
      }); 
     }); 
    }, 4000); 
} 
rotate(0); 

---

EDIT: Код может быть немного уменьшен с помощью delay()^(docs) вместо setTimeout.

Пример:http://jsfiddle.net/YSPe7/2/

var statements = $('#statements > ul > li').slice(1).hide().end(); 

function rotate(i) { 
    statements.eq(i).delay(4000).fadeOut(800, function() { 
     i = ++i % statements.length; 
     statements.eq(i).fadeIn(800, function() { 
      rotate(i); 
     }); 
    }); 
} 
rotate(0); 

Answer 2

Существует плагин JQuery, который вы можете использовать, что будет делать именно то, что вы хотите. Он называется jShowOff (http://ekallevig.com/jshowoff/). Здесь есть примеры, которые должны начаться.