站長資訊網
        最全最豐富的資訊網站

        html輪播圖如何實現

        html輪播圖的實現方法:首先使用一個控件作為圖片顯示區域,且圖片都在相同的區域顯示;然后通過Js寫個遍歷函數,每次只讓一張圖片顯示;最后通過定時器每隔一段時間調用該函數即可。

        html輪播圖如何實現

        本教程操作環境:windows7系統、html5版,DELL G3電腦。

        html輪播圖的實現方法:

        1、使用一個控件作為圖片顯示區域,且圖片都在相同的區域顯示;

        2、通過Js寫個遍歷函數,每次只讓一張圖片顯示,如style = " display:none "可以影藏其他圖片;

        3、通過定時器每隔一段時間調用該函數;

        4、這里測試的圖片是手動添加的地址,可以根據實際需要循環添加;

        Html、Javascript:

        <!-- 語言: Html、Css、Javascript --> <!-- 工具: HbuilderX --> <!-- 使用Ctrl+/ 可快速多行注釋/取消注釋 --> <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>輪播圖測試</title>     <!-- 外部導入Css文件,鏈接式 -->     <link type="text/css" rel="stylesheet" href="css/slideShow.css"/>         </head>          <body>         <p>測試輪播圖</p>         <hr id="hr1"/>         <!-- 建立一個div控件作為圖片框 -->         <div class="imgBox">             <!-- alt:圖片路徑失敗時替換顯示內容 -->             <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;         // 類似獲取一個元素數組         var imgBox = document.getElementsByClassName("img-slide");         len = imgBox.length;         imgBox[index].style.display = 'block';         // 邏輯控制函數         function slideShow() {             index ++;             // 防止數組溢出             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:

        /* 標簽選擇器 */ 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; }

        運行效果:

        html輪播圖如何實現

        相關學習推薦:html視頻教程

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 四虎影视国产精品永久在线 | 亚洲av永久无码精品网站| 国产精品无码一区二区三级| 久久久99精品一区二区| 久久精品这里热有精品| 久久久久久亚洲精品成人| 亚洲精品成a人在线观看| 国产精品亚洲日韩欧美色窝窝色欲 | 无码人妻精品一区二区三区99不卡| 精品国产美女福利到在线不卡| 日韩AV无码精品人妻系列| 亚洲av无码成人精品区| 久久丝袜精品中文字幕| 精品国产一区二区22| 国产精品无码素人福利| 日韩精品久久久久久| 国产精品久久久久9999| 97久久超碰国产精品2021| 国产亚洲精品无码成人| 精品人妻码一区二区三区| 四虎成人精品无码| 无码精品黑人一区二区三区| 亚洲精品字幕在线观看| 亚洲麻豆精品国偷自产在线91 | 99久久精品国产综合一区| 久久91精品国产91久久麻豆| 国产成人久久精品区一区二区| 69堂国产成人精品视频不卡| 99精品无人区乱码在线观看| 国产麻豆一精品一AV一免费 | 精品久久久久久久久久久久久久久 | 欧美一区二区精品| 久热这里只精品99re8久| 久久精品国产69国产精品亚洲| 国产精品成人在线| 91麻豆精品国产| 久久精品国产91久久麻豆自制| 2022国产精品最新在线| 国产日韩高清三级精品人成| 久久久无码精品午夜| 亚洲国产av无码精品|