addClass .next() .prev() слайд-шоу не работает

Question

Я хотел бы сделать небольшое слайд-шоу с jquery. Первая проблема: если у меня есть только функция «следующего щелчка», изображения отображаются один за другим. Но если я использую функцию «prev», следующая кнопка больше не будет работать. Другая проблема: слайд-шоу должно начинаться снова с первого изображения, щелкнув «следующая кнопка» после последнего изображения. Возможно, у кого-то есть идея. заранее спасибо.

  $("#next").click(function(){ 
      if($("#gallery li").next("#gallery li").length != 0) { 
       var next = $(".toppicture").parent("li").next().children("img"); 
       $("#gallery li").children("img").removeClass('toppicture'); 
       $(next).addClass('toppicture'); 
      } 
      else { 
       $(this).children("img").removeClass('toppicture'); 
       $("#gallery li:first-child").children("img").addClass('toppicture'); 
      } 
     }); 

     $("#prev").click(function(){ 
      if($("#gallery li").prev("#gallery li").length != 0) { 
       var prev = $(".toppicture").parent("li").prev().children("img"); 
       $("#gallery li").children("img").removeClass('toppicture'); 
       $(prev).addClass('toppicture'); 
      } 
      else { 
       $(this).children("img").removeClass('toppicture'); 
       $("#gallery li:first-child").children("img").addClass('toppicture'); 
      } 
     }); 

«UL» с идентификатором «галерея» выглядит следующим образом:

<li> 
<img class="toppicture" src="images/w1.jpg" title="Title #0"/> 
    </li> 
    <li> 
<img src="images/w2.jpg" title="Title #1"/> 
    </li> 
    <li> 
<img src="images/w3.jpg" title="Title #2"/> 
    </li> 

Answer 1

Это не самый простой слайдер, но я думаю, что это самый простой для понимания. jsFiddle

HTML:

<ul id="gallery"> 
    <li> <img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" title="Title #0"/> </li> 
    <li> <img src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" title="Title #1"/> </li> 
    <li> <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" title="Title #2"/> </li> 
</ul> 
<a href="#" id="previous">previous</a> <a href="#" id="next">next</a> 

JS:

function loadSlide(index){ 
    $('#gallery li').hide() 
     .eq(index).show(); 
} 

$('#gallery').data('index',0).find('li').hide(); 
loadSlide(0); 

$('#next').on('click',function(e){ 
    var index = $('#gallery').data('index'), 
    numSlides = $('#gallery li').length; 

    index = (index + 1) % numSlides;  
    loadSlide(index); 
    $('#gallery').data('index',index); 
    e.preventDefault();    
}); 
$('#previous').on('click',function(e){ 
    var index = $('#gallery').data('index'), 
    numSlides = $('#gallery li').length; 

    index = (index + numSlides - 1) % numSlides; 
    loadSlide(index); 
    $('#gallery').data('index',index); 
    e.preventDefault(); 
}); 

Это позволяет избежать много обхода (как ваш .next() фиаско) путем разделения ролей.

• Смена слайдов осуществляется с помощью функции, она принимает число и показывает, что слайд.

• номер текущего слайда хранится на самой галерее с помощью .data()

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

Таким образом, вы можете легко расширить свою деятельность на любой конкретной территории. Хотите переход? Поместите его в устройство слайдов. Хотите, чтобы слайды автоматически продвигались вперед? Установите таймер для вызова слайдер-чейнджера.

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

Answer 2

Вот с example in jsFiddle вам

Итак, что вы хотите что-то вроде карусели. Для обработки этого эффекта есть некоторые плагины jQuery, например: jCarousel от Sorgalla.com