Question

我在列表中显示带有下一个和上一个按钮的图像。

我在for循环中使用了这个jquery，因此它可以不止一个。

list1:

Prev <ul><li> img1 img2 img3....</li></ul> Next

list2:

Prev <ul><li> img1 img2 img3....</li></ul> Next

如果我在同一页面上有三个不同的图像列表，如果我点击下一个或第一个列表的上一个，那么它将申请所有列表。

如何将其应用于该特定列表以移动Next和prev。

我使用了链接中的代码：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 ;?>

Answer 1

ok首先......

1）ID应该始终是唯一的......但是在你的情况下，你的元素具有相同的ID，因为它处于循环中..所以要么改变它，要么makeit unique OR你可以在HTML代码中将它改为class。

 <div class="gallery-wrap">
 -----^^---- change to class...

2）因为你正在使用类，所以你的所有ID选择器，#都应该被你的jquery代码中的类选择器.替换。

 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;
    });

如何为特定类应用jquery

1 个答案: