javascript 自动切换到下一张图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9437923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change to next image automatically
提问by Johnny Hankgard
I have the following code used for displaying several images changed on hover, but i also would like to add a feature that changes the image automatically if i dont do it manually.
我有以下代码用于显示悬停时更改的多个图像，但我还想添加一个功能，如果我不手动更改图像，它会自动更改图像。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage"
/>
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height="79" width="78"
onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100"
onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79"
onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
What i want to do is automatically change the images displayed using javascript preferrably. How can i do that?
我想要做的是自动更改最好使用 javascript 显示的图像。我怎样才能做到这一点？
采纳答案by Mike
Use setInterval to run a function that changes the image src.
使用 setInterval 运行更改图像 src 的函数。
var x = 0;
var images = new Array("../Pictures/lightcircle2.png","../Pictures/lightcircle.png");
var i = setInterval(auto, 3000);
function auto()
{
x++;
if (x == images.length)
x=0;
document.getElementById('bigImage').src=images[x];
}
回答by Sven Bieder
回答by Birdman
Sounds like you want a carousel. If so, try this.
听起来你想要一个旋转木马。如果是这样，试试这个。
Add this to your JavaScript
将此添加到您的 JavaScript
// The list of images you want to cycle through
var imageRotation = [
'../Pictures/lightcircle.png',
'../Pictures/lightcircle2.png'
];
// The current image being displayed
var currentImage = 0;
// A variable to hold the timer
var t;
// Call this to automatically start rotation. Currently set for a 5 sec rotation
function startCarousel(){
t=setInterval(changeCarousel,5000);
}
// Moves to the next picture
function changeCarousel(){
// Change to the next image
currentImage++;
// If there isn't a next image, go back to the start
if (currentImage == imageRotation.length) currentImage = 0;
// Change the image
document.getElementById('bigImage').src=imageRotation[currentImage];
}
Then modify your function to
然后将您的功能修改为
function changeImage(img){
// Stops the rotation
clearInterval(t);
// Assigns currentImage to the image they selected
currentImage = imageRotation.indexOf(img);
// Swap the image
document.getElementById('bigImage').src=imageRotation[currentImage];
// Start the rotation again in 10 sec
setTimeout(startCarousel, 10000);
}
