我知道这个问题之前已经被问过很多次了，我试着查看答案并按照它们进行操作。但我似乎无法弄清楚如何将这些答案应用到我的特定代码中，现在我被困住了。如果有人可以查看并帮助我，将不胜感激。
简单地说，我只想做一个自动播放功能，播放这 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/