Как назначить правильную функцию кнопке слайд-шоу?

Question

Я пытаюсь сделать это маленькое слайд-шоу, оно работает, но я не могу написать правильную функцию для кнопок. Я хочу, чтобы каждый раз, когда нажата кнопка, ее связанный div-дисплей. , а затем слайд-шоу продолжить свой обычный путь.

демо: http://jsfiddle.net/sabeti05/dsagcc5u/

HTML

<div id="slideshow"> 
     <div class=" hide block"> 
     one 
     </div> 
     <div class="hide"> 
     two 
     </div> 
     <div class="hide"> 
     three 
     </div> 
    </div> 
    <button class="one">one</button> 
    <button class="two">two</button> 
    <button class="three">three</button> 

CSS

body{text-align:center} 
#slideshow { 
    height: 40px; 
    margin: 0 auto; 
    position: relative; 
    width: 100px; 
} 
#slideshow > div { 
    position: absolute; 
} 
.hide { 
    display: none; 
} 
.block { 
    display: block; 
} 

JQuery

$(document).ready(function(){ 
    setInterval(function() { 
     $('#slideshow > div.block') 
     .removeClass("block") 
     .next() 
     .addClass("block") 
     .end() 
     .appendTo('#slideshow'); 
    }, 1000); 
}); 

Answer 1

Посмотрите на changes Я сделал вашу демонстрационную версию.

Вы сделали действительно умный трюк с вращающимися элементами DOM, но таким образом div s теряют связь с кнопками. Просто оставьте элементы на месте и выберите next(). Если выбор пуст, выберите first() братьев и сестер.

Также разметка должна измениться так, что кнопки имеют type="button" (избегая таким образом их тип по умолчанию submit) и их содержали в DIV #controls.

Теперь вы можете связать прослушиватель событий одного события с событием click контейнера с элементом button. В слушателе найдите его индекс в контейнере и укажите соответствующие div с помощью селекторов jQuery. (Обратите внимание, что с jQuery 1.6.4 вы должны использовать bind вместо on для привязки обработчика события.)

И последнее, но не менее важное: есть код для перезапуска слайд-шоу при нажатии кнопки.