自定义滑块不起作用

时间：2013-01-01 09:02:07

标签： javascript jquery html css

我正在学习Jquery，我是一个全新的人。目前我试图让这个自定义滑块工作。 the image我想要实现的是，当有人点击prev或next按钮时，滑块没有任何反应，但上面写的文字会发生变化，即转到下一个{{ 1}}元素。我写了一些代码并且它工作正常，但问题出现在滑块位于最后一个子节点上。当我点击下一个按钮时文本消失，现在我甚至无法返回。我正在粘贴我在这里写的所有代码，我将非常感谢任何帮助，并帮助我学习。非常感谢！

HTML 

<li>

按钮

    <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.”</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.”</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.”</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.”</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.”</p>

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

CSS 

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

JQUERY / JAVASCRIPT 

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;
}

如果代码很草率，我很抱歉。非常感谢！

5 个答案:

答案 0 :(得分：0)

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

我从这里得到了条件的代码：

How to check if the element is not the first-child?

答案 1 :(得分：0)

试试这个： - 

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

    })

答案 2 :(得分：0)

无论是否存在next / prev元素，该脚本都会隐藏活动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');
    });
});

答案 3 :(得分：0)

@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.”</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.”</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.”</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.”</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.”</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>

答案 4 :(得分：0)

@Ragzor为什么不使用Carousel给here，它简单，可靠，完美无缺。我已多次使用它了。

相关问题
最新问题