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

也许你可以在淡入淡出之前添加一个 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

@Ragzor 你为什么不在这里使用 Carousel ，它简单、可靠并且工作得很好。我已经用过很多次了。

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

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

尝试这个：-

$("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');
    });

    })

;

javascript - 滑块在最后一张幻灯片上无法正常工作

HTML

CSS

JQUERY / JAVASCRIPT

5 回答 5

Related

Reference