第一种方法:
html代码:
<ul>
<li class="imgs"><img src=""/></li>
....
</ul>
css部分:(需先将图片设为不可见)
.imgs{
display: none;
}
js代码如下:
window.onload = function() {
var imgs = document.getElementsByClassName('imgs');
var i=0;
//让第一张图片先可见
imgs[i].style.display='block';
//设置定时器,每隔1秒图片自动轮播
setInterval(function(){
if(i<imgs.length){
i++;
if(i>imgs.length-1){
i=0;
}
imgs[i].style.display='block';
}
for(j=0;j<imgs.length;j++)
{
if(i!=j){
imgs[j].style.display='none';
}
}
},1000);
}
第二种方法:
<script type="text/javascript">
var urls;
function animate(pos){
pos%=urls.length;//在最后一个图像显示之后,回到起始值
document.images["animation"].src=urls[pos];
window.setTimeout("animate("+(pos+1)+");",500);
}
window.onload=function(){
urls=new Array(
"1.jpg",
"2.jpg",
"3.jpg"
);
animate(0);
}
</script>
html部门:
<img src="1.jpg" name="animation"/>