循环浏览 JQuery 中的图像答案

【问题标题】：Loop through images in JQuery循环浏览 JQuery 中的图像
【发布时间】：2012-08-21 22:24:33
【问题描述】：

我在一个页面上有 9 张图片。这是 html 代码。

<div id="img-grp-wrap">
    <div class="img-wrap">
        <img src="1.jpg"  alt="aa" />
        <img src="2.jpg" alt="hh" />
        <img src="3.jpg" alt="bb" />
        <img src="4.jpg" alt="cc" />
        <img src="5.jpg"  alt="aa" />
        <img src="6.jpg" alt="hh" />
        <img src="8.jpg" alt="cc" />
        <img src="9.jpg"  alt="aa" />
        <img src="10.jpg" alt="hh" />
    </div>   

    <div class="next_button">
       <img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/>
    </div>
    <div class="previous_button">
       <img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>
    </div>
</div>

下一个和上一个按钮实际上是图像。我需要遍历所有图像，以便在页面加载时，上一个链接图像应该是不可见的，单击下一个后它将是可见的。与上一个图像类似，下一个链接将是不可见的。我如何在 JQuery 中做到这一点？提前致谢。

【问题讨论】：

您听说过 Lightbox..？

标签： jquery html image loops

【解决方案1】：

正如我承诺的那样，我为你做了一个 jQuery 插件，试试吧。它会像这样工作：

在准备好文档时调用：$( '.img-wrap' ).imgSlider({ next: '.next_button', prev: 'previous_button' }); 或者您可以在插件扩展选项的代码中对其进行编辑。

next 和 prev 选项用于定义您的导航按钮。享受。 ;)

你可以在这里测试结果：http://jsfiddle.net/GomatoX/GKkRM/

    (function($){

        $.fn.imgSlider = function( options ){

            o = $.extend({
                next: '#next_button',
                prev: '#previous_button'
            }, options);

            var thisCallback = this;

            $( this ).find( 'img' ).each(function(){

                $( this ).hide();
            });
            $( this ).find( 'img' ).first().addClass( 'active' ).show();
            $( o.prev ).hide();

            // binding event next
            $( o.next ).bind( 'click' ,function(){

                var nextImg = $( thisCallback ).find( '.active' ).next();
                if ( nextImg.length == 0 ) {

                    return false;
                }
                $( o.prev ).show();
                $( thisCallback ).find( 'img' ).removeClass( 'active' ).hide();
                nextImg.addClass( 'active' ).show();
                if ( nextImg.next().length == 0 ) {

                    $( this ).hide();
                }
            });
            // binding event prev
            $( o.prev ).bind( 'click' ,function(){

                var prevImg = $( thisCallback ).find( '.active' ).prev();
                if ( prevImg.length == 0 ) {

                    return false;
                }
                $( o.next ).show();
                $( thisCallback ).find( 'img' ).removeClass( 'active' ).hide();
                prevImg.addClass( 'active' ).show();
                if ( prevImg.prev().length == 0 ) {

                    $( this ).hide();
                }
            });
        }
    })(jQuery);

【讨论】：

【解决方案2】：

我会为从“image1”到“image10”的所有图像添加 ID。然后我会向活动图像添加一个类，并检查 id 为 1 的图像是否具有该类。所以尝试这样的事情：

var no = $(".img-wrap > img").length;
//check if the first image is active           
if($("#image1").hasClass("active")){
             $("#prev").hide();
//check if the last image is active
        }else if($("#image"+no).hasClass("active")){
    $("#next").hide();
    }

【讨论】：