个人中心
gpt4 book ai didi

javascript - jQuery slider 不会开始

转载 作者：太空狗 更新时间：2023-10-29 13:29:09 29 4
gpt4 key购买 nike

我正在开发一个 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/

29 4 0
文章推荐： git - 对于初始提交， "add ."和 "add *"是同义词吗？
文章推荐： android - 从 Activity 而不是父级返回主屏幕
文章推荐： android - 我应该为 listfragment 使用什么适配器以及它们应该扩展什么类
文章推荐： Git 不允许我 merge
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com