Question

我在页面上有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中做到这一点？在此先感谢。

Answer 1

我会将'id'添加到'image1'到'image10'的所有图像中。然后我会在活动图像中添加一个类，并检查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();
    }

Answer 2

我承诺我为你制作了一个jQuery插件，试试吧。它会像这样工作：

调用文档就绪：$( '.img-wrap' ).imgSlider({ next: '.next_button', prev: 'previous_button' });或者您可以在插件扩展选项的代码中编辑它。

下一步和上一步选项是定义您的导航按钮。请享用。 ;）

您可以在此处测试结果：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);

在JQuery中循环遍历图像

2 个答案: