javascript - 最後のスライドでスライダーが正しく動作しない

Question

私は現在Jqueryを学んでおり、まったくの初心者です。現在、このカスタムスライダーを機能させようとしていました。私が達成しようとしているのは、誰かがprevまたはnextボタンをクリックすると、スライダーには何も起こらず、その上に書かれたテキストが変化する、つまり次の<li>要素に移動することです。私はいくつかのコードを書き、それは正常に動作していますが、スライダーが最後の子にあるときに問題が発生します。次のボタンをクリックすると、テキストが消えて、戻ることさえできません。ここに書いたすべてのコードを貼り付けています。どんな助けでも大歓迎です。学ぶのに役立ちます。どうもありがとう！

HTML

<ul class="testimonial-text">
  <li class="test-current">
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

    <h4>Michel Buble &amp; Tinta turner</h4>
  </li>
  <li>
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

    <h4>Rick Armstrong &amp; Ashley Tist</h4>
  </li>
  <li>
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

    <h4>Mike Tran &amp; Kimse Tricks</h4>
  </li>
  <li>
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

    <h4>Michel Buble &amp; Tinta turner</h4>
  </li>
  <li>
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

    <h4>Michel Buble &amp; Tinta turner</h4>
  </li>
</ul>

ボタン

<a class="testimonials-prev" ></a>
<a class="testimonials-next" ></a>

CSS

ul.testimonial-text{
  list-style: none;
  padding-top: 20px;
}
ul.testimonial-text li{
display: none;
}
ul.testimonial-text li.test-current{
  display: block;
}
ul.testimonial-text li p{
  text-align: center;
  font-size: 18px;
  color: #7c7c7c;
  margin-bottom: 0px;
}
ul.testimonial-text li h4{
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
}
ul.testimonial-images{
  list-style: none;
}
ul.testimonial-images li{
  display: inline-block;
  margin-left: 16px;
  opacity: 0.6;
}
ul.testimonial-images li:first-child{
  display: inline-block;
  margin-left: 0px;
}
a.testimonials-prev{
  background: url('../images/icons/test-icons.png') no-repeat;
  height: 80px;
  width: 40px;
  display: block;
  margin-left: 10px;
  cursor: pointer;
}
a.testimonials-next{
  background: url('../images/icons/test-icons.png') no-repeat top right;
  height: 80px;
  width: 40px;
  display: block;
  cursor: pointer;
}

JQUERY/JAVASCRIPT

  <script type="text/javascript">

$(document).ready(function() {

$("a.testimonials-next").click(function() {
  $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
    $("ul.testimonial-text li.test-current").next().fadeIn('slow');
    $("ul.testimonial-text li.test-current").next().addClass('test-current');
    $("ul.testimonial-text li.test-current:first").removeClass('test-current');
});

  });
$("a.testimonials-prev").click(function() {
  $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
    $("ul.testimonial-text li.test-current").prev().fadeIn('slow');
    $("ul.testimonial-text li.test-current").prev().addClass('test-current');
    $("ul.testimonial-text li.test-current:last").removeClass('test-current');
});

});

});

</script>

コードがおかしくて申し訳ありません。どうもありがとう！

score 0 · Accepted Answer

@Ragzorは、このコードを問題に使用します

    <html>
    <head>
    <title>Testing</title>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <style type="text/css">
            ul.testimonial-text{
    list-style: none;
    padding-top: 20px;
    }
    ul.testimonial-text li{
    display: none;
    }
    ul.testimonial-text li.test-current{
    display: block;
    }
    ul.testimonial-text li p{
    text-align: center;
    font-size: 18px;
    color: #7c7c7c;
    margin-bottom: 0px;
    }
    ul.testimonial-text li h4{
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    }

    ul.testimonial-images{
    list-style: none;
    }
    ul.testimonial-images li{
    display: inline-block;
    margin-left: 16px;
    opacity: 0.6;
    }
    ul.testimonial-images li:first-child{
    display: inline-block;
    margin-left: 0px;
    }

    a.testimonials-prev{
    background: url('../images/icons/test-icons.png') no-repeat;
    height: 80px;
    width: 40px;
    display: block;
    margin-left: 10px;
    cursor: pointer;
    }
    a.testimonials-next{
    background: url('../images/icons/test-icons.png') no-repeat top right;
    height: 80px;
    width: 40px;
    display: block;
    cursor: pointer;
    }
      </style>
    </head>
    <body>
        <a class="testimonials-prev" >Prev</a>
       <ul class="testimonial-text">
                    <li class="test-current">
                      <p>1 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

                      <h4>Michel Buble &amp; Tinta turner</h4>
                    </li>
                    <li>
                      <p>2 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

                      <h4>Rick Armstrong &amp; Ashley Tist</h4>
                    </li>
                    <li>
                      <p>3 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

                      <h4>Mike Tran &amp; Kimse Tricks</h4>
                    </li>
                    <li>
                      <p>4 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

                      <h4>Michel Buble &amp; Tinta turner</h4>
                    </li>
                    <li>
                      <p>5 “Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”&lt;/p>

                      <h4>Michel Buble &amp; Tinta turner</h4>
                    </li>
                  </ul>

    <a class="testimonials-next" >Next</a>
    <script type="text/javascript">

    $(document).ready(function() {
    $("a.testimonials-next").click(function() {
          $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
            var index = $("ul.testimonial-text li").index($(this));
            if(index == $("ul.testimonial-text li").length - 1){
                var $next = $("ul.testimonial-text li:first");
            }
            else    {
                var $next = $(this).next();
            }    
            $(this).removeClass('test-current');
            $next.addClass('test-current').fadeIn('slow');
        });

          });

        $("a.testimonials-prev").click(function() {
          $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
             var index = $("ul.testimonial-text li").index($(this));
             if(index == 0){
                var $prev = $("ul.testimonial-text li:last");
            }
            else    {
                var $prev = $(this).prev();
            }  

            $(this).removeClass('test-current');
            $prev.addClass('test-current').fadeIn('slow');
        });

        })
    });

    </script>
    </body>
    </html>

score 0 · Accepted Answer

たぶん、フェードの前に if ステートメントを追加して、li が最初のものかどうかを確認できますか? (次のボタンについても同様の操作を行います)。

これがJSFiddleの作業です： http://jsfiddle.net/JUveT/

例：

$("a.testimonials-prev").click(function() {
     if($("ul.testimonial-text li.test-current").prev().length){
         $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
         $("ul.testimonial-text li.test-current").prev().fadeIn('slow');
         $("ul.testimonial-text li.test-current").prev().addClass('test-current');
         $("ul.testimonial-text li.test-current:last").removeClass('test-current');
         });
     }

ここから条件のコードを取得しました：

要素が最初の子でないかどうかを確認する方法は?

score 0 · Accepted Answer

これを試して：-

$("a.testimonials-next").click(function() {
      $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
        var index = $("ul.testimonial-text li).index($(this));
        if(index == $("ul.testimonial-text li).length - 1){
            var $next = $("ul.testimonial-text li:first");
        }
        else    {
            var $next = $(this).next();
        }    
        $(this).removeClass('test-current');
        $next.addClass('test-current').fadeIn('slow');
    });

      });

    $("a.testimonials-prev").click(function() {
      $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
         var index = $("ul.testimonial-text li).index($(this));
         if(index == 0){
            var $prev = $("ul.testimonial-text li:last");
        }
        else    {
            var $prev = $(this).prev();
        }  

        $(this).removeClass('test-current');
        $prev.addClass('test-current').fadeIn('slow');
    });

    })

;

score 0 · Accepted Answer

スクリプトはli.current-test、次/前の要素が存在するかどうかに関係なく、アクティブを非表示にします。最後の要素に到達すると、当然次の要素は存在しませんが、スクリプトは依然として現在のアクティブな要素を非表示にします。次の要素が実際に存在するかどうかを最初に確認する必要があります。

$("a.testimonials-next").click(function() {
     // Switch to the next element, if it exists
    if ($("ul.testimonial-text li.test-current").next().length) {
        $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
        $("ul.testimonial-text li.test-current").next().fadeIn('slow');
        $("ul.testimonial-text li.test-current").next().addClass('test-current');
        $("ul.testimonial-text li.test-current:first").removeClass('test-current');
    }
});

そうは言っても、jQuery オブジェクトを変数に割り当てたり、メソッドを連鎖させたりすることで、コードがより読みやすく高速になるという大きなメリットがあります。上記のスニペットに関して、次のスニペットを検討してください。

$("a.testimonials-next").click(function() {
    var current_element = $("ul.testimonial-text li.test-current"),
        next_element    = current_element.next();
     // Switch to the next element, if it exists
    if (next_element.length) {
        current_element.removeClass('test-current').fadeOut('slow', function() {
        next_element.addClass('test-current').fadeIn('slow');
    });
});

score 0 · Accepted Answer

@Ragzorここでカルーセルを使用しないのはなぜですか。簡単で信頼性が高く、完全に正常に機能します。私はそれを何度も使用しました。

javascript - 最後のスライドでスライダーが正しく動作しない

HTML

CSS

JQUERY/JAVASCRIPT

5 に答える 5

Related

Reference