Heim >Web-Frontend >HTML-Tutorial >So implementieren Sie ein HTML-Karusselldiagramm
So implementieren Sie ein HTML-Karusselldiagramm
- coldplay.xixiOriginal
- 2021-03-04 17:03:2867150Durchsuche
So implementieren Sie das HTML-Karussellbild: Verwenden Sie zunächst ein Steuerelement als Bildanzeigebereich, und die Bilder werden im selben Bereich angezeigt. Schreiben Sie dann eine Durchlauffunktion über Js, um jeweils nur ein Bild anzuzeigen Timer jedes Mal. Rufen Sie diese Funktion einfach ab und zu auf.
Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5-Version, DELL G3-Computer.
So implementieren Sie das HTML-Karussellbild:
1. Verwenden Sie ein Steuerelement als Bildanzeigebereich, und die Bilder werden im selben Bereich angezeigt.
2 Schreiben Sie eine Durchlauffunktion über Js und lassen Sie nur eine zu Bild für Bild, zum Beispiel style = " display：none " kann andere Bilder ausblenden
3. Die hier getesteten Bilder werden manuell hinzugefügt und können zyklisch hinzugefügt werden Bedürfnisse;
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;
}Laufeffekt:
HTML-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein HTML-Karusselldiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!