javascript - jQuery slider 不会开始

标签 javascript jquery html css slider

我正在开发一个 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" alt="Prev" 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" alt="Next" id="next">
  </div>
</body>

</html>

最佳答案 

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

查看代码片段

//(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" alt="Prev" 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" alt="Next" id="next">
  </div>
</body>

关于javascript - jQuery slider 不会开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34461083/

上一篇：javascript - ng-class 和动画的竞争条件

下一篇：javascript - 像 JSFiddle 这样的面板

相关文章：

javascript - 在 JavaScript 中，在函数内部创建的未附加到 DOM 树的节点是否会导致空间困惑？

JQuery PNG 修复插件 - 效果不是很好？

javascript - 同一按钮的多个实例的标签

javascript - 在 Javascript 模拟时钟中使用时刻时区

javascript - addEventListener() 不工作

javascript - 为什么从外部 url 加载 div 非常慢？

html - 不以任何方式修改 HTML 的命令行 HTML 格式化程序，只是缩进？

html - 调整浏览器屏幕大小时删除容器填充

javascript - 通过更改隐藏此选择框之后的元素

javascript - Bootstrap 列表组必须位于页面内容之上

©2024 IT工具网  联系我们