關於html+js做輪播圖
阿新 • • 發佈：2019-02-05
簡單的輪播圖，沒有用ajax，單純的js+css
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0px; padding: 0px; } body { } #d1 { margin: 20px auto; height: 500px; width: 500px; border: 1px solid rosybrown; } #d1 img { margin: 75px 100px auto 100px ; border: 1px solid black; } #d1 ul{ list-style: none; margin-left: 85px; margin-top: 70px ; } #d1 ul li{ float: left; margin-left: 10px; margin-right: 10px; margin-bottom: 5px; padding: 7px 0px; font-size: 20px; } #d1 ul li a span{ border: 1px solid chartreuse; padding: 6px 15px; } a:link{ text-decoration: none; } .clear { clear: both; } </style> <body onload=imgActive()> <div id="d1" > <img src ="img/img1.jpg" style="height: 300px;width: 300px;" id="pic"/> <ul> <li><a href="#"><span>1</span></a></li> <li><a href="#"><span>2</span></a></li> <li><a href="#"><span>3</span></a></li> <li><a href="#"><span>4</span></a></li> <li><a href="#"><span>5</span></a></li> </ul> <div class="clear"></div> </div> </body> <script type="text/javascript"> var imgs = new Array("img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg","img/img5.jpg"); var index =0; function imgActive(){ var pic = document.getElementById("pic"); var lis = document.getElementsByTagName("span"); pic.src=imgs[index]; //清除li標籤的效果 for(var i=0;i<lis.length;i++){ lis[i].style.backgroundColor="white"; } //設定li標籤的樣式 lis[index].style.backgroundColor="#187ce0"; index++; //當index值為5時，初始index為0 if(index==imgs.length){ index=0; } //迴圈執行本程式碼 setTimeout("imgActive()",1000); } </script> </html>
效果圖：
