如何在html中实现一个轮播图效果
生活随笔
收集整理的這篇文章主要介紹了
如何在html中实现一个轮播图效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這期內容當中小編將會給大家帶來有關如何在html中實現一個輪播圖效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
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+/可快速多行注釋/取消注釋-->
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>輪播圖測試</title>
<!--外部導入Css文件，鏈接式-->
<linktype="text/css"rel="stylesheet"href="css/slideShow.css"/>
</head>
<body>
<p>測試輪播圖</p>
<hrid="hr1"/>
<!--建立一個div控件作為圖片框-->
<divclass="imgBox">
<!--alt：圖片路徑失敗時替換顯示內容-->
<imgclass="img-slideimg"src="img/img1.jpg"alt="img1">
<imgclass="img-slideimg"src="img/img2.jpg"alt="img2">
<imgclass="img-slideimg"src="img/img3.jpg"alt="img3">
<imgclass="img-slideimg"src="img/img4.jpg"alt="img4">
<imgclass="img-slideimg"src="img/img5.jpg"alt="img5">
</div>
</body>
<scripttype="text/javascript">
//index：索引，len：長度
varindex=0,len;
//類似獲取一個元素數組
varimgBox=document.getElementsByClassName("img-slide");
len=imgBox.length;
imgBox[index].style.display='block';
//邏輯控制函數
functionslideShow(){
index++;
//防止數組溢出
if(index>=len)index=0;
//遍歷每一個元素
for(vari=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:5pxsolidcadetblue;
/*避免因窗口變化影響圖片效果*/
width:60%;
height:40%;
margin:0auto;
}
.img{
width:60%;
height:40%;
margin:0auto;
display:none;
}
運行效果：
總結
以上是生活随笔為你收集整理的如何在html中实现一个轮播图效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： custom configuration
- 下一篇： settype where used l