jQuery滑块不会开始

Question

jQuery滑块不会开始

Gle*_*911 9 html javascript css jquery 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);

     });
   });

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jin*_*ian 4

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

Run Code Online (Sandbox Code Playgroud)

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

查看演示

查看片段

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

Run Code Online (Sandbox Code Playgroud)

//(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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

完美的答案。我也找过这个有一段时间了。谢谢。 (2认同)

归档时间：	10 年，9 月前
查看次数：	237 次
最近记录：	10 年，9 月前