輪播圖是現在網站網頁上最常見的效果之一，我們日常工作可能會使用輪播圖插件，可是一旦插件和需求不對等的時候你就需要尋找更符合你要求的插件。那么我們有找插件的功夫還不如自己寫一個輪播圖，既提升了技術又便于維護。

• 無論我們做什么特效，都要記住一個原則，先寫靜態的代碼，再做動態的處理！

html

//最外層殼子 <div class='all' id='all'><div class='screen' id='screen'>//裝圖片的殼子<ul id='ul'><li><img src="img/tx1.jpg" width="500" height='200' alt=""></li><li><img src="img/tx2.jpg" width="500" height='200' alt=""></li><li><img src="img/tx3.jpg" width="500" height='200' alt=""></li><li><img src="img/tx4.jpg" width="500" height='200' alt=""></li><li><img src="img/tx5.jpg" width="500" height='200' alt=""></li></ul>//裝圖片序號的殼子等會根據圖片的數量用js動態添加<ol></ol>//左右箭頭<div id="arr"><span id="left"></span><span id="right"></span></div></div></div>

html搭建了一個基礎的輪播圖框架

現在頁面的圖片是按順序展開的

接下來用css給它美化一下

*{padding:0;margin:0; list-style:none; border:0;}.all{width:500px;height:200px;padding:7px;border:1px solid #ccc;margin:100px auto;position:relative;}.screen{width:500px;height:200px;overflow:hidden;position:relative;}.screen li{width:500px; height:200px; overflow:hidden; float:left;}.screen ul{ position:absolute; left:0; top:0px; width:3000px;}.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;border-radius: 50%;color: #999;}.all ol li.current{ background:#bfab1f;border: 1px solid #bfab1f;color: #fff;}#arr {display: none;}#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑體'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}#arr #right{right:5px; left:auto;}

美化后的效果：

?

?

?

? ? ? ? ? ? ? 注意要給放圖片的ul的長度設成3000px

總結

以上是生活随笔為你收集整理的原生javascript实现完整的轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。