分享一个用DHTML写的一个js简易轮播图

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Andy丶年轻人</title>
<style type="text/css"> #tab { overflow:hidden; width:800px; height:500px; position:relative;} #tab > img{position:absolute;top: 0;left: 0;transition:opacity 1s;} #tab > img:not(:first-child){ opacity = 0;z-index: 0; } </style>
<script> window.onload = function(){ var images = document.getElementsByTagName('img'); var pos = 0; var len = images.length; setInterval(function(){ images[pos].style.opacity = "0"; images[pos].style.zIndex = "0"; pos = ++pos == len ? 0 : pos; //此处的优先级,有没有很懊恼 哈哈!! //我的博客里有优先级算法,感觉复习吧!哈哈 images[pos].style.opacity ='1'; images[pos].style.zIndex = "1"; },2000); }; </script>

</head>
<body>
<div id="tab">
    <img src="img/1.jpg" width="800" height="500"/>
    <img src="img/2.jpg" width="800" height="500"/>
    <img src="img/3.jpg" width="800" height="500"/>
</div>
</body>
</html>

你可能感兴趣的:(轮播图)