在一定的时间间隔后一个接一个地显示图像 [英] Show images one after one after some interval of time
问题描述
我是前端开发的新人，我面临的一个主要问题是，我有3个图像放在彼此，现在我想移动一个图像，所以其他图像出现，然后它和第三个图像来在一定的时间间隔后上传。
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.
我想在我的网站上的同一位置放置三张图片，但只希望在一段时间后一张张地看到这三张图片。
请帮助我如何做到这一点？
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??
我可以使用marquee属性或javascript吗？
May i use marquee property or javascript???
推荐答案
在这里您可以选择PURE JavaScript解决方案：
Here you go PURE JavaScript solution:
编辑我添加了图片旋转功能...查看实例（下面的链接）
EDIT I 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>
以及一个工作示例：
< href =http://simplestudio.rs/yard/rotate/rotate.html =nofollow> http://simplestudio.rs/yard/rotate/rotate.html
这篇关于在一定的时间间隔后一个接一个地显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
