堆栈内存溢出
  简体   繁体   English

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

[英]Slider not working properly at the last slide

 原文  2013-01-01 09:02:06  4   5    javascript/ jquery/ html/ css

问题描述

I am currently learning Jquery and I'm a total newbie. 我目前正在学习Jquery，我是一个新手。 Currently I was trying to make this custom slider work. 目前，我正在尝试使此自定义滑块起作用。 图片 What I am trying to achieve is, when someone clicks the prev or next buttons , nothing happens to the slider but the text written above it changes, ie goes to the next <li> element. 我试图实现的是，当有人点击了prev或next按钮，没有任何反应的滑块，但它上面的变化，即书面文字进入下一个<li>元素。 I wrote some code and it is working fine, but the problem comes when the slider is on the last child. 我写了一些代码，它工作正常，但是当滑块在最后一个孩子上时，问题就来了。 When I click the next button the text disappears and now I cant even go back. 当我单击下一步按钮时，文本消失，现在我什至不能返回。 I am pasting all the code I wrote here any help would be greatly appreciated and would help me to learn. 我将粘贴我在此处编写的所有代码，对您的任何帮助将不胜感激，并将帮助我学习。 THANKS A LOT! 非常感谢！

HTML 的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.”</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>

the buttons 按钮 

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

CSS 的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 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>

I'm very sorry if the code is sloppy. 如果代码草率，我非常抱歉。 Thanks alot! 非常感谢！

5 个解决方案

解决方案1
 0  2013-01-01 09:15:01

Maybe you could add an if statement before the fade that would check to see if the li is the first one? 也许您可以在渐变之前添加if语句，以检查li是否是第一个？ (you would do similar for the next button as well). （您也将对下一个按钮执行类似操作）。

Here's a JSFiddle working: http://jsfiddle.net/JUveT/ 这是JSFiddle的工作方式： http : //jsfiddle.net/JUveT/

Example: 例： 

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

I got the code for the condition from here: 我从这里获得了条件的代码：

How to check if the element is not the first-child? 如何检查元素是否不是第一个孩子？

解决方案2
 0  2013-01-01 09:20:52

Try this :- 尝试这个 ：- 

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

    })

; ;

解决方案3
 0  2013-01-01 09:22:50

The script hides the active li.current-test regardless if a next/prev element exists. 无论下一个/上一个元素是否存在，脚本都会隐藏活动的li.current-test 。 When you reach the last element, a next element naturally does not exist, but the script still hides the current active element regardless. 当您到达最后一个元素时，自然不会存在下一个元素，但是脚本仍然会隐藏当前的活动元素。 You need to check first if a next element actually exists: 您需要先检查下一个元素是否确实存在： 

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

Now, that being said, your code could benefit greatly from assigning jQuery objects to variables and chaining of methods, that would make your code more readable and faster. 话虽如此，通过将jQuery对象分配给变量和方法链，您的代码可以大大受益，这将使您的代码更具可读性和速度。 Consider this snippet in regard to the one above: 考虑上面的片段： 

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

解决方案4
 0  2013-01-01 09:27:07

@Ragzor use this code for your problem @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>

解决方案5
 0  2013-04-06 06:37:06

@Ragzor why don't you use Carousel give here , its easy, reliable and works perfectly fine. @Ragzor您为什么不使用Carousel 在这里给它，它简单，可靠且效果很好。 I have used it many times. 我已经使用了很多次。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Flex Slider无法正常工作最后一张幻灯片 - Flex Slider Not working properly Last Slide 上一个幻灯片的视差滑块无法正常工作 - parallax slider not working properly from last slide 如何停止最后一张幻灯片上的滑块 - How to stop slider on the last slide ios Slider默认为最后一张幻灯片 - ios Slider defaults to the last slide Slick Slider：如果滑块在视口中，则滚动到最后一张幻灯片 - Slick Slider: Scroll to last slide if slider is in viewport 基本的JQuery滑块不适用于幻灯片 - Basic JQuery Slider Not working for Slide 滑块问题-在最后一张幻灯片上奇怪的重置 - Slider Issues - Weird reset on last slide jQuery倾斜滑块，动画在最后一张幻灯片处停止 - Jquery tilt slider with animations stopped at last slide 轨道jQuery滑块在最后一张幻灯片上暂停 - orbit jquery slider pause on last slide Glide.js slider 没有在最后一张幻灯片上暂停 - Glide.js slider not pausing on last slide
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM