我在列表中显示带有下一个和上一个按钮的图像。
我已经在for循环中使用了这个jquery,所以它可以不止一个。
list1:
Prev <ul><li> img1 img2 img3....</li></ul> Next
list2:
Prev <ul><li> img1 img2 img3....</li></ul> Next
如果我在同一页上有三个不同的图像列表,如果我点击第一个列表的下一个或上一个,那么它适用于所有列表。
我如何将其应用于该特定列表以移动"下一个"answers"上一个"。
我使用了链接中的代码:http://css-plus.com/2010/09/create-your-own-jquery-image-slider/
我使用了以下代码:Jquery:
$(document).ready(function(){
// Gallery
if(jQuery(".gallery").length){
// Declare variables
var totalImages = jQuery(".gallery > li").length,
imageWidth = jQuery(".gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery(".gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery(".gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if(jQuery(".gallery").position().left < 0 && !jQuery(".gallery").is(":animated")){
jQuery(".gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if(jQuery(".gallery").position().left > stopPosition && !jQuery(".gallery").is(":animated")){
jQuery(".gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
Html and php:
<?php foreach($records as $row) :?>
<div id="gallery-wrap">
<ul id="gallery" class="gallery">
<?php foreach($row['images'] as $image) :?>
<li>
<a href="#"><img src="<?php echo base_url();?>uploads/<?php echo $image['img']; ?> /></a>
</li>
<?php endforeach ;?>
</ul>
</div>
<div id="gallery-controls" class="gallery-controls">
<a href="#" id="gallery-prev" >Prev</a>
<a href="#" id="gallery-next" >Next</a>
</div>
<?php endforeach ;?>
好吧,首先。。。。
1) ID应该始终是唯一的。。。但在您的情况下,您有具有相同ID的元素,因为它处于循环中。。因此,要么更改它并使其唯一,要么您可以将它更改为HTML代码中的类。。。
<div class="gallery-wrap">
-----^^---- change to class...
2) 由于您使用的是类,所以在jquery代码中,所有的ID选择器(即#
)都应该替换为类选择器.
。
jQuery(".gallery-prev").click(function(){
--------^------ here
中的更改
HTML
<div class="galleryDisplayBlock"> //add new div
<div class="gallery-wrap">
<ul class="gallery">
<?php foreach($row['images'] as $image) :?>
<li>
<a href="#"><img src="<?php echo base_url();?>uploads/<?php echo $image['img']; ?> /></a>
</li>
<?php endforeach ;?>
</ul>
</div>
<div class="gallery-controls">
<a href="#" class="gallery-prev" >Prev</a>
<a href="#" class="gallery-next" >Next</a>
</div>
</div>
JQuery
jQuery(".gallery-prev").click(function(){
var thisGallery=jQuery(this).parent();
if(thisGallery.find(".gallery").position().left < 0 && !thisGallery.find(".gallery").is(":animated")){
thisGallery.find(".gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery(".gallery-next").click(function(){
var thisGallery=jQuery(this).parent();
if(thisGallery.find(".gallery").position().left > stopPosition && !thisGallery.find(".gallery").is(":animated")){
thisGallery.find(".gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});