如何只用计时器制作幻灯片

Question

我正在尝试为只有计时器的网页制作幻灯片，因为我还不明白 jQuery 是如何工作的。我已经完成了第一部分，但我不知道如何让图像在循环完成后重新出现。

这是我的代码

function Timer1(){
    document.getElementsByClassName('image1')[0].style.visibility = "hidden"; 
}
    setTimeout(Timer1,3000);

function Timer2(){
    document.getElementsByClassName('image2')[0].style.visibility = "hidden"; 
}
    setTimeout(Timer2,6000);
 
function Timer3(){
    document.getElementsByClassName('image3')[0].style.visibility = "hidden"; 
}
    setTimeout(Timer3,9000);

function Timer4(){
    document.getElementsByClassName('image4')[0].style.visibility = "hidden"; 
}
    setTimeout(Timer4,12000);
 
function Timer5(){
    document.getElementsByClassName('image5')[0].style.visibility = "hidden"; 
}
    setTimeout(Timer5,15000);

<div class="slide1">
<img class="image1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

<div class="slide1">
<img class="image2" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-14.jpg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

<div class="slide3">
<img class="image1" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-13.gif" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

<div class="slide1">
<img class="image4" src="http://www.clipartbest.com/cliparts/aTe/Mng/aTeMngqT4.jpeg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

<div class="slide5">
<img class="image5" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-19.jpg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

我有来自我电脑的图片，但我在这里替换了网络链接。我希望它是在循环完成后重新开始的地方。谢谢。

Answer 1

// configure your slides and durations here
var slides = [{ name: "image1", duration: 3000 }, { name: "image2", duration: 6000 }], currentIndex = 0, current = slides[currentIndex];

function changeSlide() {
  document.getElementsByClassName(current.name)[0].style.visibility = "hidden";
  currentIndex++;
  if (currentIndex >= slides.length) { currentIndex = 0; }
  current = slides[currentIndex];
  setTimeout(changeSlide, current.duration);
}

// starts the whole thing off
setTimeout(changeSlide, current.duration);

这可以收紧并变得更智能等等，但这应该可以帮助您入门。

Answer 2

执行此操作的一种更方便的方法是：隐藏所有图像，即使用 css class.hidden，但保持第一张可见。

页面加载完成后，调用一个函数，我们将其命名为 myslide()。这个函数必须寻找当前显示的图像，隐藏它，然后寻找下一个（或第一个）图像来显示它。当最后一张图片被隐藏时，新的一张图片无法显示，所以我们需要检查这种情况，并显示图像。

这里是 jQuery 版本。写出来应该很容易理解。

window.onload=setTimeout(myslide,3000);
function myslide()
{
//we use the image that is not hidden
  img=$(".slide:not(.hidden)");
  img.addClass("hidden");
  
  if (img.is('.slide:last')) 
    $("#container .slide:first").removeClass("hidden");
  else 
    img.next( ".slide" ).removeClass("hidden");

setTimeout(myslide,3000);
}

.hidden{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
<div class="slide">
<img class="image1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

<div class="slide">
<img class="image2" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-14.jpg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

<div class="slide">
<img class="image1" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-13.gif" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

<div class="slide">
<img class="image4" src="http://www.clipartbest.com/cliparts/aTe/Mng/aTeMngqT4.jpeg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>

<div class="slide">
<img class="image5" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-19.jpg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
  </div>
</div>

Answer 3

看起来第一次尝试不错，做这样的事情是一种很好的学习方式！您绝对可以对您的代码进行相当多的概括，您的函数几乎都在做同样的事情，只是使用了不同的 class（旁注：一个 id 在这种情况下可能更有意义，因为它不是通用的） - 因此变量应该成为一个参数，你应该删除除一个函数之外的所有函数。

function Timer(className){
    document.querySelector('.' + className).style.visibility = "hidden"; 
}

话虽如此，使用单个时间间隔处理图像集合而不是单个图像可能更有意义（这样您就可以添加更多图像而无需更新代码）。以下是您如何处理该问题的基本思路：

更新您的 HTML 以使用通用 class "slide":

<div class="slide">
   <img class="image1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
</div>

<div class="slide">
   <img class="image2" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-14.jpg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
</div>

<div class="slide">
  <img class="image1" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-13.gif" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
</div>

<div class="slide">
  <img class="image4" src="http://www.clipartbest.com/cliparts/aTe/Mng/aTeMngqT4.jpeg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
</div>

<div class="slide">
  <img class="image5" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-19.jpg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
</div>

创建一个名为 slideshow 的函数来初始化：

function slideshow() {
   // GOALS:
   //  1. Get a reference to all slides (e.g. slides = document.querySelectorAll('.slides'))
   //  2. Set an index that will track which one is visible (start at 1)
   //  3. Make first slide (index-1) visible
   //  3. Start the interval (e.g. setInterval(showNextSlideThenUpdateIndex, 300))

   // super verbosely named for clarity
   function showNextSlideThenUpdateIndex() {
       // GOALS:
       //   1. if index == 0, set slides[slides.length-1] visibility to hidden,
       //      otherwise, set slides[index-1] to hidden
       //   2. set slides[index] to visible
       //   3. increment index or set to 0 if index === slides.length
   }
}

这是一个例子：

function slideshow() {
  var slides = document.querySelectorAll('.slide');
  var index = 1;
  var wait = 300;

  slides[index-1].style.visibility = 'visible';
  
  setInterval(showNextSlideThenUpdateIndex, wait);

  function showNextSlideThenUpdateIndex() {
    slides[index].style.visibility = 'visible';
    
    if (index === 0) {
      slides[slides.length-1].style.visibility = 'hidden';
      index++;
    } else if (index === slides.length-1) {
      // reset index to start slideshow over
      slides[index - 1].style.visibility = 'hidden';
      index = 0;
    } else {
      slides[index-1].style.visibility = 'hidden';
      index++;
    }
  }
}

slideshow();

.slide {
  visibility: hidden;  
}

    <div class="slide">
       <img class="image1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
    </div>

    <div class="slide">
       <img class="image2" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-14.jpg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
    </div>

    <div class="slide">
      <img class="image1" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-13.gif" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
    </div>

    <div class="slide">
      <img class="image4" src="http://www.clipartbest.com/cliparts/aTe/Mng/aTeMngqT4.jpeg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
    </div>

    <div class="slide">
      <img class="image5" src="http://science-all.com/images/wallpapers/pictures-of-happy-faces/pictures-of-happy-faces-19.jpg" style="width:400px;height:300px;position:absolute;top:250px;left:100px;z-index:5;">
    </div>

这远非完美，但希望对您有所帮助。

Answer 4

按原样添加 html 代码
jQuery 代码：您刚刚在准备就绪的文档上添加了这个设置间隔函数，它将正常工作。

 $(document).ready(function() {
     $("#slideshow > div:gt(0)").hide();
     setInterval(function() {
         $('#slideshow > div:first')
             .fadeOut(1000)
             .next()
             .fadeIn(1000)
             .end()
             .appendTo('#slideshow');
     }, 3000);
 });

如何只用计时器制作幻灯片

How to make a slideshow with only a timer

html

javascript

jquery

slideshow