jquery slideshow create a previous next loop on image
I am trying to create a simple image slideshow that fades in and out the previous and next images that are wrapped in p tags because of how wordpress does it, I 开发者_JS百科have managed to get it to move to the next image but I cannot get it to move to the previous image. I would also like it to stay in a continuous never ending loop when clicking previous or next.
Here is my html
<div>
<div id="prev">Previous Image</div>
<div id="next">Next Image</div>
<div id="slides">
<p class="slideWrap">
<img src="" alt="" title="Untitled-2" class="alignnone size-full wp-image-460" height="500" width="500" />
</p>
<p class="slideWrap">
<img src="" alt="" title="fishy" class="alignnone size-full wp-image-369" height="496" width="437" />
</p>
</div>
</div>
and here is my jquery
$('.slideWrap:not(:first)').hide();
$currentBox = $(".slideWrap");
$("#next").click(function() {
$currentBox.fadeOut(function() {
$currentBox = $currentBox.next();
$currentBox.fadeIn('300');
});
});
$("#prev").click(function() {
$currentBox.fadeOut(function() {
$currentBox = $currentBox.prev();
$currentBox.fadeIn('300');
});
});
heres the url http://satbulsara.com/luke-irwin/rugs/floral/testing-slide/
There's quite a few ways to do this IMO, but this one should be pretty close to your existing code:
$('.slideWrap:not(:first)').hide();
var $boxes = $(".slideWrap"),
$currentBox = $boxes.first().show();
$("#next").click(function() {
$currentBox.fadeOut(300, function() {
$currentBox = $currentBox.next();
if (!$currentBox.length) {
$currentBox = $boxes.first();
}
$currentBox.fadeIn(300);
});
});
$("#prev").click(function() {
$currentBox.fadeOut(300, function() {
$currentBox = $currentBox.prev();
if (!$currentBox.length) {
$currentBox = $boxes.last();
}
$currentBox.fadeIn(300);
});
});
精彩评论