javascript - CSS 帮助 : Autoplay 6 images in a loop-6ren

javascript - CSS 帮助 : Autoplay 6 images in a loop

转载作者：行者123 更新时间：2023-11-28 03:06:53

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

简单地说，我只想做一个自动播放功能，播放这 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 应用于鼠标悬停部分和自动播放，则加分。

最佳答案

给你。我将 show 和 mouseover 函数分别重构为一个函数； show() 函数使用 jQuery 的 fadeIn 和 fadeOut 效果。该按钮开始和停止幻灯片放映。我还稍微更改了您的 CSS，使图像具有唯一的 id 并且 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>

关于javascript - CSS 帮助 : Autoplay 6 images in a loop，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32276704/

文章推荐： html - 我无法让我的 Paypal 下拉菜单在 div 中居中

文章推荐： javascript - 合并 HTML 代码

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - CSS 帮助 : Autoplay 6 images in a loop