Как добавить предыдущую и следующую кнопку в простой код слайд-шоу jquery

Question

Я нашел этот простой код jQuery для слайд-шоу из этого блога.

http://leavesofcode.net/2012/08/17/simple-slideshow/

Он отлично работает в проекте я работаю прямо сейчас, где я могу назвать изображения с jQuery load() функции и слайд-шоу по-прежнему работает. Хотя я хотел бы реализовать предыдущую и следующую кнопку в том же коде, если это возможно. Любая помощь могла бы быть полезна. Пожалуйста, помогите спасибо.

Вот код: http://jsfiddle.net/mblase75/CRUJJ/

<script> 
$(document).ready(function() { 
    setInterval(function() { 
     var $curr = $('.slideshow img:visible'), // should be the first image 
      $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first(); 
      // if there isn't a next image, loop back to the first image 
     $next.css('z-index',2).fadeIn('slow', function() { // move it to the top 
      $curr.hide().css('z-index',0); // move this to the bottom 
      $next.css('z-index',1);  // now move it to the middle 
     }); 
    }, 6000); // milliseconds 
}); 
</script> 

<div class="slideshow"> 
    <img src="first-image.jpg" width="500" height="100" alt="first image"> 
    <img src="second-image.jpg" width="500" height="100" alt="second image"> 
    <img src="third-image.jpg" width="500" height="100" alt="third image"> 
    <img src="fourth-image.jpg" width="500" height="100" alt="fourth image"> 
</div> 

<style> 
.slideshow { 
    position: relative; /* necessary to absolutely position the images inside */ 
    width: 500px; /* same as the images inside */ 
    height: 100px; 
} 
.slideshow img { 
    position: absolute; 
    display: none; 
} 
.slideshow img:first-child { 
    display: block; /* overrides the previous style */ 
} 
</style> 

Answer 1

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

Я создал общую функцию перехода, которая совместно используется функциями getNext и getPrev, так что код перехода может быть общим.

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

Working Demo

var interval = undefined; 
$(document).ready(function() { 
    interval = setInterval(getNext, 2000); // milliseconds 
    $('#next').on('click', getNext); 
    $('#prev').on('click', getPrev); 
}); 

function getNext() { 
    var $curr = $('.slideshow img:visible'), 
     $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first(); 

    transition($curr, $next); 
} 

function getPrev() { 
    var $curr = $('.slideshow img:visible'), 
     $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last(); 
    transition($curr, $next); 
} 

function transition($curr, $next) { 
    clearInterval(interval); 

    $next.css('z-index', 2).fadeIn('slow', function() { 
     $curr.hide().css('z-index', 0); 
     $next.css('z-index', 1); 
    }); 
} 

Answer 2

Попробуйте

$('.next').click(function(){ 
    $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow'); 
    }) 

Answer 3

Используйте свой код события нажатия следующей кнопки. Что-то вроде этого:

$("#button_id").click(function(){ 
all your lines in **setInterval** 
}); 

Для предыдущей кнопки используйте .prev вместо .next

Answer 4

responsive slideshow free jquery script

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

Answer 5

Добавить пару IMG в вашем HTML, как это:

<div class="slideshow"> 
    <img src="first-image.jpg" width="500" height="100" alt="first image"> 
    <img src="second-image.jpg" width="500" height="100" alt="second image"> 
    <img src="third-image.jpg" width="500" height="100" alt="third image"> 
    <img src="fourth-image.jpg" width="500" height="100" alt="fourth image"> 
</div> 
<img src="prev.jpg" width="50" height="50" id="imgPrev"> 
<img src="next.jpg" width="50" height="50" id="imgNext"> 

и изменить JavaScript, как это:

$(document).ready(function() { 

     $("#imgNext").click(function() { 
      var $curr = $('.slideshow img:visible'), 
       $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first(); 
       $next.css('z-index',2).fadeIn('slow', function() { 
       $curr.hide().css('z-index',0); 
       $next.css('z-index',1); 
      }); 
    }); 

     $("#imgPrev").click(function() { 
      var $curr = $('.slideshow img:visible'), 
       $prev = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last(); 
       $prev.css('z-index',2).fadeIn('slow', function() { 
       $curr.hide().css('z-index',0); 
       $prev.css('z-index',1); 
      }); 
     }); 

     set 

Interval(function() { 
     var $curr = $('.slideshow img:visible'), 
      $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first(); 
     $next.css('z-index',2).fadeIn('slow', function() { 
      $curr.hide().css('z-index',0); 
      $next.css('z-index',1); 
     }); 
    }, 6000); // milliseconds 
}); 

Я попробовал его с ваш код на скрипач, и он работает :)

Answer 6

Я знаю, что это старый, но исправить ниже:

$('.slideshow :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('#slideshow'); 

.slideshow { 
    width: 100%; 
    position: relative; 
    height: auto; 
} 
.slideshow img:first-child { position:relative; } /*auto height adjust*/ 
.slideshow img { 
    top: 0; 
    left: 0; 
    width: 100%; 
    max-width: 600px; 
    height: auto; 
    position: absolute; 
} 

Просто пытаюсь понять на реверсе. Все это хорошо, но переходы были, а, не гладкими. Использование класса по какой-либо причине.