2

スライドショー用の JS (jQuery) スクリプトを作成しました。非常にシンプルで、次へ/前へのボタンしかありません。今：

問題は、スライドショーがシームレスでないことです。次/前のボタンを押すと、空の画像も表示されます。したがって、3 つの画像を取得し、画像 #1 からナビゲートを開始すると、次のようなことが起こります。

1# -> #2 -> #3 -> 空

空の代わりに #1 の画像に戻る必要がありますが、そうではありません。（imgの代わりにpを入れました）

jsFiddle コードは次のとおりです。

http://jsfiddle.net/mostafatalebi/SG3Rq/

JSコードは次のとおりです。

$(document).ready(function() {                                          

    var x = $('.slide_top').children('p');

    x.hide();

    var i = 0;

    x.eq(i).show();

    $("#slide_next").click(function(event){ 

            event.stopPropagation();    
            event.preventDefault(); 
            x.eq(i).hide();     
            x.eq(i).next().show();  
            i = i + 1;  
            if(i === x.length)
            {
                i  = 0; 
            }

    });         
    $("#slide_prev").click(function(event){                             
            event.preventDefault();
            event.stopPropagation();
            x.eq(i).hide(); 

            x.eq(i).prev().show();      
            i = i - 1;
            if(i == x.length)
            {
                i  = 0; 
            }

    });
});

HTMLコードは次のとおりです。

<div class='slide_top'>
    <p>This is the first Paragraph</p>
    <p>This is the second Paragraph</p>
    <p>This is the third Paragraph</p>
</div>
<ul id='slide_top_click'>
    <li><a id='slide_prev' href='#' class='slide-next-icon'>Next</a></li>
    <li><a id='slide_next' href='#'  class='slide-prev-icon'>Previous</a></li>
</ul>
4

2 に答える 2

1

次のブロック:

  if(i == x.length){
        i  = 0; 
        x.eq(i).show();
  }

前のブロックで

 if(i === 0){
      i=x.length-1;
      x.eq(i).show();
 }else{
     i = i - 1;
 }

if ブロックでこのコードを更新します。そして、次のボタンで前のメソッドを呼び出し、前のボタンで次のメソッドを呼び出すというエラーが1つ見られました。それがあなたの間違いなのか、それとも何か他のものなのかわかりません。

最終コード:

   $(document).ready(function(){                                            
        var x = $('.slide_top').children('p');
        x.hide();
        var i = 0;
        x.eq(i).show();
        $("#slide_next").click(function(event){ 
                event.stopPropagation();    
                event.preventDefault(); 
                x.eq(i).hide();     
                x.eq(i).next().show();  
                i = i + 1;  
                if(i === x.length){
                    i  = 0;  
                    x.eq(i).show();   
                }
        });         
        $("#slide_prev").click(function(event){                             
                event.preventDefault();
                event.stopPropagation();
                alert(i);
                x.eq(i).hide(); 
                x.eq(i).prev().show();      
                if(i === 0){
                     i=x.length-1;
                     x.eq(i).show();
                }else{
                    i = i - 1;
                } 
        });
    });
于 2013-09-05T05:15:22.920 に答える
0

おはようございます

この例は不完全に機能しました

コードについては、これをチェックしてください。http://jsfiddle.net/5HHew/6/

これは、次と前のコードにする必要があります

$("#slide_next").click(function(){ 

event.stopPropagation();    
            event.preventDefault(); 
             x.eq(i).hide();
             i = i + 1;      


            if(i === x.length)
            {
                i  = 0; 

            }   

    x.eq(i).show();
    });         
    $("#slide_prev").click(function(event){                             
            event.preventDefault();
            event.stopPropagation();
             x.eq(i).hide();
             i = i - 1;      


            if(i === -1)
            {
                i  = x.length - 1; 

            }             
     x.eq(i).show();

    });     });

また、イベントを入れ替えました

幸運を！

于 2013-09-05T05:42:06.677 に答える