Javascript 在一段时间间隔后一张一张地显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12742034/
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
Show images one after one after some interval of time
提问by Muhammad Azeem
I am new person in Front End Development and i am facing one major problem is that i have 3 images placed on each others and now i want to move one image so the other image comes up and then it goes and third image comes up after some interval of time.
我是前端开发的新人，我面临的一个主要问题是我将 3 张图像放在彼此上，现在我想移动一张图像，以便另一张图像出现，然后它消失，第三张图像在一些之后出现时间间隔。
I want three images on same position in my site but only wants to see these three images one after one after some interval of time. Please help how i can do this??
我想在我的网站的同一位置上放置三张图片，但只想在一段时间后一张一张地看到这三张图片。请帮助我如何做到这一点？？
May i use marquee property or javascript???
我可以使用 marquee 属性或 javascript 吗？？？
回答by boz
Non-jQuery Option
非 jQuery 选项
If you don't want to go down the jquery route, you can try http://www.menucool.com/javascript-image-slider. The setup is just as easy, you just have to make sure that your images are in a div with id of sliderand that div has the same dimensions as one of your images.
如果你不想走 jquery 路线，你可以试试http://www.menucool.com/javascript-image-slider。设置同样简单，您只需确保您的图像位于 id 为 的 div 中，slider并且该 div 与您的图像之一具有相同的尺寸。
jQuery Option
jQuery 选项
The jQuery cycle pluginwill help you achieve this. It requires jquery to work but it doesn't need much setting up to create a simple sliple slideshow.
在jQuery的周期插件将帮助你实现这一目标。它需要 jquery 才能工作，但不需要太多设置即可创建简单的幻灯片幻灯片。
Have a look at the 'super basic' demo:
看看“超级基本”演示：
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
It has many optionsif you want something a bit fancier.
如果你想要更高级的东西，它有很多选择。
回答by Develoger
Here you go PURE JavaScript solution:
给你纯 JavaScript 解决方案：
EDITI have added image rotation... Check out live example (link below)
编辑我添加了图像旋转......查看现场示例（下面的链接）
<script>
var current = 0;
var rotator_obj = null;
var images_array = new Array();
images_array[0] = "rotator_1";
images_array[1] = "rotator_2";
images_array[2] = "rotator_3";
var rotate_them = setInterval(function(){rotating()},4000);
function rotating(){
rotator_obj = document.getElementById(images_array[current]);
if(current != 0) {
var rotator_obj_pass = document.getElementById(images_array[current-1]);
rotator_obj_pass.style.left = "-320px";
}
else {
rotator_obj.style.left = "-320px";
}
var slideit = setInterval(function(){change_position(rotator_obj)},30);
current++;
if (current == images_array.length+1) {
var rotator_obj_passed = document.getElementById(images_array[current-2]);
rotator_obj_passed.style.left = "-320px";
current = 0;
rotating();
}
}
function change_position(rotator_obj, type) {
var intleft = parseInt(rotator_obj.style.left);
if (intleft != 0) {
rotator_obj.style.left = intleft + 32 + "px";
}
else if (intleft == 0) {
clearInterval(slideit);
}
}
</script>
<style>
#rotate_outer {
position: absolute;
top: 50%;
left: 50%;
width: 320px;
height: 240px;
margin-top: -120px;
margin-left: -160px;
overflow: hidden;
}
#rotate_outer img {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<html>
<head>
</head>
<body onload="rotating();">
<div id="rotate_outer">
<img src="0.jpg" id="rotator_1" style="left: -320px;" />
<img src="1.jpg" id="rotator_2" style="left: -320px;" />
<img src="2.jpg" id="rotator_3" style="left: -320px;" />
</div>
</body>
</html>
And a working example:
http://simplestudio.rs/yard/rotate/rotate.html
回答by SReject
<html>
<head>
<script type="text/javascript">
window.onload = function(){
window.displayImgCount = 0;
function cycleImage(){
if (displayImgCount !== 0) {
document.getElementById("img" + displayImgCount).style.display = "none";
}
displayImgCount = displayImgCount === 3 ? 1 : displayImgCount + 1;
document.getElementById("img" + displayImgCount).style.display = "block";
setTimeout(cycleImage, 1000);
}
cycleImage();
}
</script>
</head>
<body>
<img id="img1" src="./img1.png" style="display: none">
<img id="img2" src="./img2.png" style="display: none">
<img id="img3" src="./img3.png" style="display: none">
</body>
</html>?
回答by Anton
arrayImageSource= ["Image1","Image2","Image3"];
setInterval(cycle, 2000);
var count = 0;
function cycle()
{
image.src = arrayImageSource[count]
count = (count === 2) ? 0 : count + 1;
}?
Maybe something like this?
也许是这样的？
回答by Thanh Trung
If you aim for good transition and effect, I suggest an image slider called "jqFancyTransitions"
如果您的目标是良好的过渡和效果，我建议使用名为“jqFancyTransitions”的图像滑块
