0

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

我在 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 ;?>
4

1 回答 1

1

好的首先....

1）ID应该始终是唯一的...但是在您的情况下，您的元素具有相同的ID，因为它在循环中..所以要么更改它并使其唯一，要么您可以将其更改为HTML代码中的类...

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

2）由于您使用的是 class ，因此您的所有 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;
    });
于 2013-02-11T07:20:29.800 回答