jQuery滑块不会开始

Posted

技术标签:

【中文标题】jQuery滑块不会开始【英文标题】：jQuery slider not going to beginning 【发布时间】：2016-03-31 09:18:51 【问题描述】：

我正在开发一个小的 jQuery 小部件，以添加到我的投资组合/知识库中。该小部件可以工作，并循环浏览 5 张幻灯片，但是，它不会像应有的那样循环回第 1 张幻灯片。它只前进到一张空白幻灯片，页面需要刷新才能再次向后或向前移动。我是 javascript/jQuery 初学者，所以我确定我错过了一些简单的东西，但我一辈子都想不通。非常感谢任何帮助。

    //(document).ready(); makes sure that all elements on the page are
    //loaded before loading the script
   $(document).ready(function() 
     //alert('Doc is loaded');   

     //specifies speed to change from image to image, in ms
     var speed = 500;

     //specifies auto slider option
     var autoswitch = true;

     //Autoslider speed
     var autoswitch_speed = 4000;

     //Add initial active class
     $('.slide').first().addClass('active');

     //Hide all slides
     $('.slide').hide();

     //Show first slide
     $('.active').show();

     $('#next').on('click', function() 
       $('.active').removeClass('active').addClass('oldActive');
       if ($('.oldactive').is('slider:last-child')) 
         //alert('true');
         $('.slide').first().addClass('active');
        else 
         $('.oldActive').next().addClass('active');
       
       $('.oldActive').removeClass('oldActive');
       $('.slide').fadeOut(speed);
       $('.active').fadeIn(speed);

     );

     $('#prev').on('click', function() 
       $('.active').removeClass('active').addClass('oldActive');
       if ($('.oldactive').is(':first-child')) 
         $('.slide').last().addClass('active');
        else 
         $('.oldActive').prev().addClass('active');
       
       $('.oldActive').removeClass('oldActive');
       $('.slide').fadeOut(speed);
       $('.active').fadeIn(speed);

     );
   );
* 
  margin: 0;
  padding: 0;

body 
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #fff;
  background: #333;
  line-height: 1.6em;

a 
  color: #fff;
  text-decoration: none;

h1 
  text-align: center;
  margin-bottom: 20px;

#container 
  width: 980px;
  margin: 40px auto;
  overflow: hidden;

#slider 
  width: 940px;
  height: 350px;
  position: relative;
  overflow: hidden;
  float: left;
  padding: 3px;
  border: #666 solid 2px;
  border-radius: 5px;

#slider img 
  width: 940px;
  height: 350px;

.slide 
  position: absolute;

.slide-copy 
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  background: 7f7f7f;
  background: rgba(0, 0, 0, 0.5);

#prev,
#next 
  float: left;
  margin-top: 130px;
  cursor: pointer;
  position: relative;
  z-index: 100;

#prev 
  margin-right: -45px;

#next 
  margin-left: -45px;

<!DOCTYPE html>
<html>

<head>
  <title>jQuery Content Slider</title>
  <link rel="stylesheet" href="css/style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>

<body>
  <div id="container">
    <header>
      <h1>jQuery Content Slider</h1>
    </header>
    <img src="img/arrow-left.png"  id="prev">
    <div id="slider">
      <div class="slide">
        <div class="slide-copy">
          <h2>Slider One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide1.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Two</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide2.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Three</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide3.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Four</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide4.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Five</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide5.jpg">
      </div>
    </div>
    <img src="img/arrow-right.png"  id="next">
  </div>
</body>

</html>

【问题讨论】：

【参考方案1】： 
var cur = 0,    // Start Slide Index. We'll use ++cur to increment index
    pau = 2000,            // Pause Time (ms)
    fad = 500,             // Fade Time (ms)
    $ga = $('#slider'),   // Cache Gallery Element
    $sl = $('> div', $ga), // Cache Slides Elements
    tot = $sl.length,      // We'll use cur%tot to reset to first slide
    itv ;                  // Used to clear on mouseenter

$sl.hide().eq( cur ).show(); // Hide all Slides but desired one

function stopFn()  clearInterval(itv); 
function loopFn()  itv = setInterval(fadeFn, pau); 
function fadeFn()  $sl.fadeOut(fad).eq(++cur%tot).stop().fadeIn(fad); 
$ga.hover( stopFn, loopFn );

loopFn(); // Finally, Start

在脚本中添加此代码。这将启用循环效果。尝试使用您的代码，但对我来说有点复杂。试试这个方法，这会很有效。

见DEMO

看sn-p 

//(document).ready(); makes sure that all elements on the page are
     //loaded before loading the script
    $(document).ready(function() 
      //alert('Doc is loaded');   

      //specifies speed to change from image to image, in ms
      var speed = 1000;

      //specifies auto slider option
      var autoswitch = true;

      //Autoslider speed
      var autoswitch_speed = 4000;

      //Add initial active class
      $('.slide').first().addClass('active');

      //Hide all slides
      $('.slide').hide();

      //Show first slide
      $('.active').show();

      $('#next').on('click', function() 
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldactive').is('slider:last-child')) 
          //alert('true');
          $('.slide').first().addClass('active');
         else 
          $('.oldActive').next().addClass('active');
        
        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);

      );

      $('#prev').on('click', function() 
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldactive').is(':first-child')) 
          $('.slide').last().addClass('active');
         else 
          $('.oldActive').prev().addClass('active');
        
        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);

      );
    );


    var cur = 0, // Start Slide Index. We'll use ++cur to increment index
      pau = 1000, // Pause Time (ms)
      fad = 500, // Fade Time (ms)
      $ga = $('#slider'), // Cache Gallery Element
      $sl = $('> div', $ga), // Cache Slides Elements
      tot = $sl.length, // We'll use cur%tot to reset to first slide
      itv; // Used to clear on mouseenter

    $sl.hide().eq(cur).show(); // Hide all Slides but desired one

    function stopFn() 
      clearInterval(itv);
    

    function loopFn() 
      itv = setInterval(fadeFn, pau);
    

    function fadeFn() 
      $sl.fadeOut(fad).eq(++cur % tot).stop().fadeIn(fad);
    
    $ga.hover(stopFn, loopFn);

    loopFn(); // Finally, Start
* 
   margin: 0;
   padding: 0;
 
 body 
   font-family: 'Arial', sans-serif;
   font-size: 14px;
   color: #fff;
   background: #333;
   line-height: 1.6em;
 
 a 
   color: #fff;
   text-decoration: none;
 
 h1 
   text-align: center;
   margin-bottom: 20px;
 
 #container 
   width: 980px;
   margin: 40px auto;
   overflow: hidden;
 
 #slider 
   width: 500px;
   height: 300px;
   position: relative;
   overflow: hidden;
   float: left;
   padding: 3px;
   border: #666 solid 2px;
   border-radius: 5px;
 
 #slider img 
   width: 500px;
   height: 300px;
 
 .slide 
   position: absolute;
 
 .slide-copy 
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 20px;
   background: 7f7f7f;
   background: rgba(0, 0, 0, 0.5);
 
 #prev,
 #next 
   float: left;
   margin-top: 130px;
   cursor: pointer;
   position: relative;
   z-index: 100;
 
 #prev 
   margin-right: -45px;
 
 #next 
   margin-left: -45px;
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>
  <div id="container">
    <header>
      <h1>jQuery Content Slider</h1>
    </header>
    <img src="http://leedspromoproducts.com/templates//img/thumbnails_prev_button.png"  id="prev">
    <div id="slider">
      <div class="slide">
        <div class="slide-copy">
          <h2>Slider One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://www.vectordiary.com/isd_premium/048-hot-air-balloon/hot-air-balloon.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Two</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Three</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://images.china.cn/attachement/jpg/site1007/20110808/000cf1a48f870fa9c75c55.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Four</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://cdn.allsteamboat.com/images/content/5418_gBVhd_Hot_Air_Balloon_Rodeo_in_Steamboat_Springs_md.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Five</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
      </div>
    </div>
    <img src="http://thehaircraftersco.com/wp-content/uploads/2015/10/next-button.png"  id="next">
  </div>
</body>

【讨论】：

完美答案。我也在寻找这个。谢谢。【参考方案2】：

您可以重写代码以使用函数，以便于理解和阅读。

var hwSlideSpeed = 700;
var slideNum = 0;
slideCount = $("#slider .slide").size(); //Count of slides
var animSlide = function(arrow)
    $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
    if(arrow == "next")
        if(slideNum == (slideCount-1))slideNum=0;
        elseslideNum++
        
    else if(arrow == "prew")
    
        if(slideNum == 0)slideNum=slideCount-1;
        elseslideNum-=1
    
    else
        slideNum = arrow;
        
    $('.slide').eq(slideNum).fadeIn(hwSlideSpeed);


$('#nextbutton').click(function()
    animSlide("next");

    )
$('#prewbutton').click(function()
    animSlide("prew");
    )

希望对你有帮助

【讨论】：

【参考方案3】：

你的操作语法错误，应该是“is(':last-child'))”

    if($('.oldActive').is(':last-child'))
        //alert('true');
        $('.slide').first().addClass('active');
     else 
        $('.oldActive').next().addClass('active');

【讨论】：

以上是关于jQuery滑块不会开始的主要内容，如果未能解决你的问题，请参考以下文章

Jquery slider范围滑块，为两个滑块设置不同的setp值

jQuery滑块不会显示在最大值

jQuery slick 滑块行为怪异

jQuery 光滑的滑块过滤器

歌曲不会在滑块拖动 iOS 上快进

如何使用 jQuery 自定义动画 <ul> 轮播滑块？