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类，.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

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

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

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

更新您的HTML以使用通用类＆＃34; slide＆＃34;：

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

以下是一个例子：

＆＃13;

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();

＆＃13;

.slide {
  visibility: hidden;  
}

＆＃13;

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

＆＃13;

这远非完美，但希望能帮助你。

Answer 4

添加HTML代码
jQuery代码：你刚刚在文档就绪上添加了这个set interval函数，它可以正常工作。

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

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

4 个答案: