图片轮播是网页中常用的展示图片风格。大都会觉得用JS库才能运行，今天分享一个不需要JS库的纯JS代码轮播实例，望对网页设计者有用。
<!DOCTYPE html><html><head><title>图片轮播代码</title><meta charset="gb2312"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"></head><style type="text/css"> body{max-width: 640px;margin: 0 auto;} #lunbo ul li{width:100%;list-style: none;width:640px; height:250px;background-color: #f00;text-align: center;overflow:hidden;} #lunbo ul li:not(:first-child){display: none;}</style><body><div id="lunbo"> <ul> <li><img src='http://www.yinxi.net/com_data/UploadFiles/TB2BI0rqXXXXXX9XFXXXXXXXXXX_!!2320720565.jpg'></li> <li><img src='http://www.yinxi.net/com_data/UploadFiles/TB2VVxEqXXXXXaCXpXXXXXXXXXX_!!2320720565.jpg'></li> <li><img src='http://www.yinxi.net/com_data/UploadFiles/TB2MIC1g_hnpuFjSZFpXXcpuXXa_!!45784942.jpg'></li> <li>4</li> </ul></div><script type="text/javascript"> //因为使用了document，所以js需要放在需要执行的代码下面生效才能生效 var li=document.getElementById('lunbo').getElementsByTagName("li"); var num=0; var len=li.length; setInterval(function(){ li[num].style.display="none"; num=++num==len?0:num; li[num].style.display="inline-block"; },3000);//切换时间</script></body></html>
