首页 > 代码库 > 简单的轮播效果
简单的轮播效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 #tab { overflow:hidden; width:400px; height:250px; position:relative; float:left;} 8 #tab>img:not(:first-child){ display:none; } 9 10 </style>11 <script>12 window.onload = function(){13 14 var images = document.getElementsByTagName(‘img‘);15 var pos = 0;16 var len = images.length;17 18 setInterval(function(){19 20 images[pos].style.display = ‘none‘;21 pos = ++pos == len ? 0 : pos;22 images[pos].style.display = ‘inline‘;23 24 },1000);25 26 };27 </script>28 29 </head>30 31 <body>32 <div id="tab">33 <img src="img/01.jpg" width="400" height="250"/>34 <img src="img/02.jpg" width="400" height="250"/>35 <img src="img/03.jpg" width="400" height="250"/>36 </div>37 </body>38 </html>
简单的轮播效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。