溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關如何在html中實現一個輪播圖效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
操作環境：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中實現一個輪播圖效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
