Jquery слайдер в обратном порядке

Question

Это код слайдера JQuery изображения

http://jsfiddle.net/6pLg5/

$(".Slider > div:gt(0)").hide(); 

function slideLoop() { 
    $('.Slider > div:first') 
    .next() 
    .show() 
    .end() 
    .appendTo('.Slider'); 
} 

slideLoop(); 

setInterval(slideLoop, 3000); 

$('.right').click(
    slideLoop 
) 

Делаю кнопки управления. Режим слайда работает. Как сделать функцию слайда слева?

Заранее спасибо.

Answer 1

Попробуйте это ...

HTML код

<div id="img-grp-wrap"> 
    <div class="img-wrap"> 
     <img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" /> 
     <img src="http://0.tqn.com/d/paganwiccan/1/G/T/1/-/-/BlackCat.jpg" /> 
     <img src="http://2.bp.blogspot.com/-H_iTYn3QQOk/Tfp5aK2vi5I/AAAAAAAAABM/QM45bNOM4HY/s1600/cat-claw.jpg" /> 
     <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" /> 
    </div>  
    <img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/> 
    <img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>  
</div> 

CSS ...

#img-grp-wrap { 
    position: relative; 
    width: 180px; 
    height: 180px; 
    margin: 100px auto; 
} 

.img-wrap { 
    position: relative; 
    border: 1px solid #CCC; 
    width: 180px; 
    height: 180px; 
} 

.img-wrap img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    -moz-box-shadow: 1px 1px 4px #CCC; 
    padding: 10px; 
} 

.next, .prev { 
    position: absolute; 
    cursor: pointer; 
    top: 70px; 
} 

.next { 
    right: -40px; 
} 

.prev { 
    left: -40px; 
} 

Jquery ...

$('.img-wrap img:gt(0)').hide(); 

$('.next').click(function() { 
    $('.img-wrap img:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap'); 
}); 

$('.prev').click(function() { 
    $('.img-wrap img:first-child').fadeOut(); 
    $('.img-wrap img:last-child').prependTo('.img-wrap').fadeOut(); 
    $('.img-wrap img:first-child').fadeIn(); 
}); 

Наконец рабочая скрипку .... http://jsfiddle.net/b4T7m/

Если вам нужно с setInterval ... http://jsfiddle.net/bh6aY/

Наслаждайтесь вашим кодирования .... !!!

Answer 2

Попробуйте функцию.

function reverseLoop() { 
    $('.Slider > div:last') 
    .addClass('animation') 
    .prev() 
    .removeClass('animation') 
    .show() 
    .end() 
    .appendTo('.Slider'); 
} 

setInterval(reverseLoop, 8000);