站長資訊網(wǎng)html輪播圖的實(shí)現(xiàn)方法：首先使用一個控件作為圖片顯示區(qū)域，且圖片都在相同的區(qū)域顯示；然后通過Js寫個遍歷函數(shù)，每次只讓一張圖片顯示；最后通過定時器每隔一段時間調(diào)用該函數(shù)即可。
本教程操作環(huán)境：windows7系統(tǒng)、html5版，DELL G3電腦。
html輪播圖的實(shí)現(xiàn)方法：
1、使用一個控件作為圖片顯示區(qū)域，且圖片都在相同的區(qū)域顯示；
2、通過Js寫個遍歷函數(shù)，每次只讓一張圖片顯示，如style = " display：none "可以影藏其他圖片；
3、通過定時器每隔一段時間調(diào)用該函數(shù)；
4、這里測試的圖片是手動添加的地址，可以根據(jù)實(shí)際需要循環(huán)添加；
Html、Javascript：
<!-- 語言: Html、Css、Javascript --> <!-- 工具: HbuilderX --> <!-- 使用Ctrl+/ 可快速多行注釋/取消注釋 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>輪播圖測試</title> <!-- 外部導(dǎo)入Css文件，鏈接式 --> <link type="text/css" rel="stylesheet" href="css/slideShow.css"/> </head> <body> <p>測試輪播圖</p> <hr id="hr1"/> <!-- 建立一個div控件作為圖片框 --> <div class="imgBox"> <!-- alt：圖片路徑失敗時替換顯示內(nèi)容 --> <img class="img-slide img" src="img/img1.jpg" alt="img1"> <img class="img-slide img" src="img/img2.jpg" alt="img2"> <img class="img-slide img" src="img/img3.jpg" alt="img3"> <img class="img-slide img" src="img/img4.jpg" alt="img4"> <img class="img-slide img" src="img/img5.jpg" alt="img5"> </div> </body> <script type="text/javascript"> // index：索引， len：長度 var index = 0, len; // 類似獲取一個元素數(shù)組 var imgBox = document.getElementsByClassName("img-slide"); len = imgBox.length; imgBox[index].style.display = 'block'; // 邏輯控制函數(shù) function slideShow() { index ++; // 防止數(shù)組溢出 if(index >= len) index = 0; // 遍歷每一個元素 for(var i=0; i<len; i++) { imgBox[i].style.display = 'none'; } // 每次只有一張圖片顯示 imgBox[index].style.display = 'block'; } // 定時器，間隔3s切換圖片 setInterval(slideShow, 3000); </script> </html>
Css：
/* 標(biāo)簽選擇器 */ p { text-align: center; font-size: 25px; color: cadetblue; font-family: fantasy; } /* id選擇器 */ #hr1 { background-color: cadetblue; height: 2px; width: 75%; } /* 類選擇器 */ .imgbox { border-top: 5px solid cadetblue; /* 避免因窗口變化影響圖片效果 */ width: 60%; height: 40%; margin: 0 auto; } .img { width: 60%; height: 40%; margin: 0 auto; display: none; }
運(yùn)行效果：
相關(guān)學(xué)習(xí)推薦：html視頻教程
