0

1ページに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でそれを行うにはどうすればよいですか？前もって感謝します。

4

2 に答える 2

1

「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();
    }
于 2012-08-27T12:43:33.783 に答える
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);
于 2012-08-27T16:24:46.823 に答える