CSS 帮助：循环自动播放 6 张图像答案

【问题标题】：CSS help: Autoplay 6 images in a loopCSS 帮助：循环自动播放 6 张图像
【发布时间】：2015-08-28 17:33:01
【问题描述】：

我知道这个问题已经被问过很多次了，我试着查看答案并遵循它们。但我似乎无法弄清楚如何用我的特定代码应用这些答案，现在我被卡住了。如果有人可以查看它并帮助我，将不胜感激。

简单地说，我只想制作一个自动播放功能，可以播放这 6 张图像，还可以播放和暂停。理想情况下，只需一个按钮。就这样。 [JSfiddle 链接。虽然没有图片。也许有帮助？][1]

window.onload = function() {

  function show1() {
    document.getElementById("showingImage").src = "images/.jpg";
  }

  function show2() {
    document.getElementById("showingImage").src = "images/2.jpg";
  }

  function show3() {
    document.getElementById("showingImage").src = "images/3.jpg";
  }

  function show4() {
    document.getElementById("showingImage").src = "images/4.jpg";
  }

  function show5() {
    document.getElementById("showingImage").src = "images/5.jpg";
  }

  function show6() {
    document.getElementById("showingImage").src = "images/6.jpg";
  }

  var one = document.getElementById("one");
  one.onmouseover = show1;

  var two = document.getElementById("two");
  two.onmouseover = show2;

  var three = document.getElementById("three");
  three.onmouseover = show3;

  var four = document.getElementById("four");
  four.onmouseover = show4;

  var five = document.getElementById("five");
  five.onmouseover = show5;

  var six = document.getElementById("six");
  six.onmouseover = show6;
}

#container {
  width: 800px;
  margin: 0 auto;
  background-color: red;
}
#showingImage {
  width: 800px;
  height: 400px;
}
#thumbnail {
  max-height: 50px;
  margin: 10 auto 10 10;
  text-align: center;
}

HTML:

<body>
  <div id="container">
    <div>
      <img id="showingImage" src="images/1.jpg">
    </div>
    <div id="thumbnail">
      <span id="one"><img id="thumbnail" src="images/1.jpg"></span>
      <span id="two"><img id="thumbnail" src="images/2.jpg"></span>
      <span id="three"><img id="thumbnail" src="images/3.jpg"></span>
      <span id="four"><img id="thumbnail" src="images/4.jpg"></span>
      <span id="five"><img id="thumbnail" src="images/5.jpg"></span>
      <span id="six"><img id="thumbnail" src="images/6.jpg"></span>
    </div>
  </div>
</body>

如果您能解释如何将 Jquery fadeIn 应用于鼠标悬停部分和自动播放，则可以加分。

【问题讨论】：

您的 JSFiddle 链接需要更多链接。

标签： javascript jquery html css autoplay

【解决方案1】：

给你。我将show 和mouseover 函数重构为一个函数； show() 函数使用 jQuery 的 fadeIn 和 fadeOut 效果。按钮开始和停止幻灯片。我还稍微更改了您的 CSS，以便图像具有唯一的 ids 和 thumbnail 是一个类。

window.onload = function() {

  var playing;
  var currentImage = 1;

  // show an image with 200ms fade in/out effects
  function show(img) {
    $("#showingImage").fadeOut(200, function() {
      $("#showingImage").attr("src", "https://dl.dropboxusercontent.com/u/76726218/images/" + img + ".jpg").fadeIn(200);
    });
  }

  // initialze the mouseover
  $("img.thumbnail").mouseover(function() {
    console.log($(this));
    show($(this).attr("id"));
  });

  // start autoplay with 1s per image
  function play() {
    if (!playing) {
      playing = setInterval(function() {
        show(currentImage + 1);
        currentImage++;
        currentImage %= 6;
      }, 1000);
    }
  }

  // pause autoplay
  function pause() {
    clearInterval(playing);
    playing = false;
  }

  // set up the button to toggle between play & pause
  $("#playPauseButton").click(function(e) {
    if (playing) {
      pause();
      $("#playPauseButton").html("Play");
    } else {
      play();
      $("#playPauseButton").html("Pause");
    }
  });

  // start autoplay
  play();

}

#container {
  width: 800px;
  margin: 0 auto;
  background-color: red;
  text-align: center;
}
#showingImage {
  width: 800px;
  height: 400px;
}
.thumbnail {
  max-height: 50px;
  margin: 10 auto 10 10;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div>
    <img id="showingImage" src="https://dl.dropboxusercontent.com/u/76726218/images/1.jpg">
  </div>
  <div class="thumbnail">
    <span><img id="1" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/1.jpg"></span>
    <span><img id="2" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/2.jpg"></span>
    <span><img id="3" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/3.jpg"></span>
    <span><img id="4" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/4.jpg"></span>
    <span><img id="5" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/5.jpg"></span>
    <span><img id="6" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/6.jpg"></span>
  </div>
  <button id="playPauseButton">Pause</button>
</div>

【讨论】：