web-dev-qa-db-ja.com

左右のボタンを備えた非常にシンプルな画像スライダー/スライドショー。自動再生なし

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

ここにjsFiddlehttp://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は正常に機能しますが、ユーザーが最後のスライドで[次へ]ボタンをクリックすると、最初の画像がスキップされます。最初の画像を1回だけ表示し、他のすべての画像は、次にクリックするたびにスライドし続けます。何らかの理由で表示：最初の画像には何も追加されませんが、そのコードがどこから来たのかわかりません。

前のボタンの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に戻り、それ自体を繰り返します。

jqueryonclicksliderslideshowautoplay
8
bob

私の以前の回答に関するコメントを読んだ後、私はこれを別の回答とするかもしれないと考えました。

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

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

WORKING JS FIDDLE - 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）最初のスライドを取得し、「アクティブ」なクラスを追加して、どのスライドを扱っているかを確認します。

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

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

2）次はifステートメントで、スライドショーの最後にいて、再び最初に戻る必要があるかどうかを確認します。 oldActive（つまり送信スライド）が最後の子であるかどうかを確認します。そうである場合、最初の子に戻って「アクティブ」にします。最後の子でない場合は、次の要素を取得し（.next（）を使用）、クラスをアクティブにします。

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

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

5）アクティブなスライドをフェードインする

ステップ3

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

これを達成する方法は数千あることに注意することが重要です。これは単に状況に対する私の見解です。

12
James

車輪を再発明しようとするのはなぜですか？より軽量なjQueryスライドショーソリューションがありますが、誰かが突っ込むことができ、誰かが既にあなたのためにハードワークを行い、あなたが遭遇するかもしれない問題（ブラウザ間の互換性など）について考えています。

jQuery Cycle は、私のお気に入りの軽量ライブラリの1つです。

あなたが達成したいことはちょうどで行うことができます

    jQuery("#slideshow").cycle({
    timeout:0, // no autoplay
    fx: 'fade', //fade effect, although there are heaps
    next: '#next',
    prev: '#prev'
    });

JSFIDDLE TO SEE HOW IT IT IS

11
James

Jqueryスライダーを作成するための非常に簡単なコードここに2つのdivがあります。1つ目はスライダービューアーで、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>
1
Kaushal Sachan