使用setinterval进行图像幻灯片放映
using setinterval for image slideshow
我试图使用javascript创建一个简单的图像幻灯片,但它不起作用。
<script>
var image=document.getElementById("aaa");
var img_array=["images/Chrysanthemum.jpg","images/desert.jpg","images/koala.jpg","images/penguins.jpg","images/hydrangeas.jpg","images/lighthouse.jpg","images/jellyfish.jpg"];
var index=0;
function slide()
{
image.setAttribute("src",img_array[index]);
index++;
if(index>=img_array.length)
{
index=0;
}
}
setInterval("slide()",2000);
</script>
</head>
<body>
<img id="aaa" src="images/tulips.jpg" width="400" height="400" name="image" />
</body>
简单方法:
window.onload = function() {
var image=document.getElementById("aaa");
var img_array=[...];
var index=0;
var interval = 2000;
function slide() {
image.src = img_array[index++%img_array.length];
}
setInterval(slide, interval);
}
更好的方式:
将setInterval(slide,2000);
更改为:
setTimeout(function() {
slide();
setTimeout(arguments.callee, interval)
}, interval);
Hello below是您的代码的固定版本。
<script>
var image = document.getElementById("aaa");
var img_array=["http://png-4.findicons.com/files/icons/1008/quiet/256/java.png","http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/System-Java-icon.png"];
var index=0;
function slide()
{
document["aaa"].src = img_array[index];
index++;
if(index>=img_array.length)
{
index=0;
}
}
setInterval("slide()",2000);
</script>
</head>
<body>
<img id="aaa" src="http://www.tutorialsscripts.com/free-icons/programming-language/java-icons/purple-java-icon-256-x-256.gif" width="400" height="400" name="image" />
用以下替换您的setinterval调用
setInterval(function(){slide()},2000);
而不是
setInterval("slide()",2000);
放入
setInterval(slide,2000);
代码:
function slideshow()
{
var slides= ["background-image : url(image/1.jpg)","background-image : url(image/2.jpg)"];
var i = 0;
var divh = document.getElementById("demo").style ;
while( i < slides.length)
{
if( i == (slides.length-1) )
{
divh = slides[i];
i = 0;
}
else
{
divh = slides[i];
i++ ;
}
}
}
相关文章:
- 我可以使此幻灯片图像自动播放吗?
- 在滑块内动态添加幻灯片图像
- 幻灯片图像在页面加载时弹出
- 来自数据库的幻灯片图像
- 如何在Javascript中用URL链接不同的幻灯片图像
- JavaScript渐变幻灯片-图像链接
- 将特定html文件上的幻灯片图像调整为移动屏幕
- 设置幻灯片图像间隔
- 如何在加载时隐藏幻灯片图像
- 背景轮播,用于在幻灯片图像中包含 DIV
- 使用nivoSlider,如何确定当前的幻灯片图像或索引
- 什么是开始使用交互式Javascript幻灯片/图像查看器的简单方法
- Jquery,添加上一个/下一个链接对幻灯片图像的效果
- 幻灯片图像可以在本地使用,但不能在我的网站上使用
- 单击幻灯片图像以强制执行一步
- 使幻灯片图像从第一个到最后
- IE8解决方案的圆角幻灯片图像
- 有没有办法保护我的幻灯片图像?
- 为什么此幻灯片图像没有't跑?这很奇怪
- jQuery幻灯片图像转换