Добавить автоматизацию в слайдер содержимого jQuery

Question

Я ищу некоторую помощь, чтобы внедрить таймер для этого скрипта, к которому я привязываюсь.

Как сейчас, он переключает разные слайды при повороте списка вправо, но я хочу, чтобы ползунок автоматически переходил к следующему слайду через определенное количество времени, пока он не достигнет конца, а затем вернется к вершина.

Уловка состоит в том, что он также должен работать так, как сейчас, так что вы можете переключаться с помощью зависания, и когда вы перестаете парить, он должен помнить положение и перейти к следующему пункту.

Я понимаю, что это много, чтобы просить, но какой-то указатель будет замечательным, спасибо большое!

DEMO: http://jsbin.com/acorah

Answer 1

Ваш код принимает немного удар по производительности с этим each() цикл, который я не думаю, что вам нужно. Вы связываете события внутри цикла, и вы ограничиваете свои возможности, объявляя свои действия внутри области bind(). Вы хотите иметь возможность вызывать события на любом объекте, а не только на один элемент; $('.cn_item') в вашем случае.

Идея состоит в том, чтобы отслеживать текущий слайд с классом, допустим, .cur.
Затем вы создаете объект, в котором объявляете все свои методы. Основными методами или действиями являются getCur() и goTo(), и в основном все остальное будет использовать их. то есть. next() это просто ярлык для goTo()

var actions = { 
    getCur: function(){ return idx; }, 
    goTo: function(idx){ 
     // The simplest case 
     $slides.hide().eq(idx).show(); 
    }, 
    next: function(){ this.goTo(this.getCur()+1); }, 
    prev: function(){ this.goTo(this.getCur()-1); } 
    . 
    . 
    . 
} 

Теперь вы можете вызвать действия по событиям, просто делает это:

$slides.click(function(){ actions.goTo($(this).index()); }); 
$next.click(function(){ actions.next(); }); 

И тогда вы можете setInterval(), чтобы добавить таймер.

setInterval(actions.next, 1000); 

Этот tutorial может помочь. Я в основном охватываю все, что связано с созданием слайдера. Я бы изменил некоторые вещи на сегодняшний день, мы изучаем новые способы ежедневного кодирования.