这是一段简单的Html网页中嵌入的图片轮回播放的js源代码,为增添Html一点效果:
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style type="text/css">
#tab{
overflow:hidden;
width:400px;
height:250px;
position:relative;
float:left;
border:1px solid red; }
#tab>img:not(:first-child){ display:none; }
</style>
<script>
window.onload = function(){
var images = document.getElementsByTagName('img');
var pos = 0;
var len = images.length;
setInterval(function(){
images[pos].style.display = 'none'; /*设置索引为0的图片(就是第一张)样式为dislay:none;*/
pos = ++pos == len ? 0 : pos; /*如果索引值 == 你所添加图片的数量就把索引值设置为0,如果不等于就把自加后的索引值 赋给pos; */
images[pos].style.display = 'inline'; /*显示图片*/
},1000);
};
</script>
</head>
<body>
<div id="tab">
<img src="pic1.jpg" width="400" height="250"/> /*这里放你需要的照片(数量可以增加)*/
<img src="pic2.jpg" width="400" height="250"/> /*这个统计的是页面内所有的图片,记得调整*/
<img src="pic.jpg" width="400" height="250"/>
</div>
</body>
</html>
我只是自己收藏使用 勿喷。