8

自動再生のない非常に単純な画像スライダー/スライドショーを作成しようとしています。クリックで次または前の画像に移動したいだけです。以下で読むことができるように、いくつかの問題があります。

これがjsFiddle http://jsfiddle.net/HsEne/12/です（フィドルの画像の代わりに背景色を使用し、imgをdivに切り替えましたが、もちろんまったく同じ問題です）

HTML:

<div id="slider-wrapper">

<div id="slider">
<img class="sp" src="/img1.jpg">
<img class="sp" src="/img2.jpg">
<img class="sp" src="/img3.jpg">
<img class="sp" src="/img4.jpg">
<img class="sp" src="/img5.jpg">
<img class="sp" src="/img6.jpg">
</div>

<img id="button-previous" src="/button-arrow-left.jpg">
<img id="button-next" src="/button-arrow-right.jpg">
</div>

CSS:

#slider-wrapper {
display: block;
max-width: 790px;
margin: 5% auto;
max-height: 500px;
height: 100%; }

#slider {
display: block;
position: relative;
z-index: 99999;
max-width: 710px;
width: 100%;
margin: 0 auto; }

#button-previous { 
position: relative;
left: 0;
margin-top: 40%;
width: 40px;
height: 60px; }

#button-next {
position: relative;
margin-top: 40%;
float: right; }

.sp {
position: absolute; }

#slider .sp {
max-width: 710px;
width: 100%;
max-height: 500px; }

次のボタンの jQuery:

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-next").click(function() { 
        jQuery("#slider > img:first")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

上記の jQuery は正常に動作しますが、ユーザーが最後のスライドで次のボタンをクリックすると最初の画像がスキップされます。最初の画像は一度だけ表示され、他のすべての画像は次がクリックされるたびにスライドし続けます。何らかの理由で display: none が最初の画像に追加されますが、そのコードがどこから来ているのかわかりません。

前のボタンの jQuery:

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-previous").click(function() { 
        jQuery("#slider > img:last")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

上記のこの jquery コードは、プレビューされたばかりの画像を正常に返します。しかし、もう一度クリックしても何も起こりません。

.next() の代わりに .prev() も試しました。前のボタンを初めてクリックすると、正常に機能します。画像 #4 を見ているとします。前のボタンをクリックすると、画像 #3 に移動します。しかし、もう一度クリックすると、画像 #2 には移動せず、画像 #4 に戻り、次に #3、次に #4 を繰り返します。

4

4 に答える 4

13

以前の回答に対するあなたのコメントを読んだ後、これを別の回答にするかもしれないと思いました。

jQueryをよりよく理解するために手動でやろうとするあなたのアプローチには感謝していますが、既存のフレームワークを使用するメリットを強調しています。

とはいえ、ここに解決策があります。作業しやすいように、css と HTML の一部を変更しました。

ワーキング JS フィドル- http://jsfiddle.net/HsEne/15/

これはjQueryです

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

    $('#button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();


    });

       $('#button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });




});

それでは説明です。
ステージ 1
1) ドキュメントの準備が整った状態でスクリプトをロードします。

2) 最初のスライドを取得し、'active' クラスを追加して、どのスライドを扱っているかを確認します。

3) すべてのスライドを非表示にして、アクティブなスライドを表示します。したがって、スライド #1 は表示ブロックで、残りはすべて display:none; です。

ステージ 2 ボタンの次のクリック イベントを操作します。
1) 消えるスライドから現在アクティブなクラスを削除し、クラス oldActive を与えます。

2) 次は if ステートメントで、スライド ショーの最後にいて、もう一度最初に戻る必要があるかどうかを確認します。oldActive (すなわち出力スライド) が最後の子であるかどうかをチェックします。そうである場合は、最初の子に戻って「アクティブ」にします。最後の子でない場合は、次の要素を ( . next() を使用して) 取得し、クラスをアクティブにします。

3) oldActive クラスは不要になったため削除します。

4) すべてのスライドをフェードアウトする

5) アクティブなスライドのフェードイン

ステップ 3

手順 2 と同じですが、要素を逆方向にトラバースするための逆ロジックを使用します。

これを実現する方法は何千もあることを知っておくことが重要です。これは単に状況に対する私の見解です。

于 2013-05-27T05:48:01.423 に答える
1

jquery スライダーを作成するための非常に単純なコード ここに 2 つの div があります。最初はスライダー ビューアーで、2 番目はイメージ リスト コンテナーです。コードをコピペしてcssでカスタマイズするだけです。

    <div class="featured-image" style="height:300px">
     <img id="thumbnail" src="01.jpg"/>
    </div>

    <div class="post-margin" style="margin:10px 0px; padding:0px;" id="thumblist">
    <img src='01.jpg'>
    <img src='02.jpg'>
    <img src='03.jpg'>
    <img src='04.jpg'>
    </div>

    <script type="text/javascript">
            function changeThumbnail()
            {
            $("#thumbnail").fadeOut(200);
            var path=$("#thumbnail").attr('src');
            var arr= new Array(); var i=0;
            $("#thumblist img").each(function(index, element) {
               arr[i]=$(this).attr('src');
               i++;
            });
            var index= arr.indexOf(path);
            if(index==(arr.length-1))
            path=arr[0];
            else
            path=arr[index+1];
            $("#thumbnail").attr('src',path).fadeIn(200);
            setTimeout(changeThumbnail, 5000);  
            }
            setTimeout(changeThumbnail, 5000);
    </script>
于 2014-06-07T13:09:23.190 に答える
-1 
<script type="text/javascript">
                    $(document).ready(function(e) {
                        $(".mqimg").mouseover(function()
                        {
                            $("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />"); 
                        })
                        $(".mqimg").mouseout(function()
                        {
                            $("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100);
                        })
                    });
                    </script>
                    <style>
                    .mqimg{ cursor:pointer;}
                    </style>
                    <div style="position:relative; width:100%; height:1px; text-align:center;">`enter code here`
                    <div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div>
<img class='mqimg' src='spppimages/1.jpg' height='100px' />
<img class='mqimg' src='spppimages/2.jpg' height='100px' />
<img class='mqimg' src='spppimages/3.jpg' height='100px' />
<img class='mqimg' src='spppimages/4.jpg' height='100px' />
<img class='mqimg' src='spppimages/5.jpg' height='100px' />
于 2014-07-08T12:44:51.973 に答える