Maison > Article > interface Web > Comment implémenter un graphique carrousel HTML
Comment implémenter un graphique carrousel HTML
- coldplay.xixioriginal
- 2021-03-04 17:03:2867078parcourir
Comment implémenter l'image carrousel html : utilisez d'abord un contrôle comme zone d'affichage de l'image, et les images sont affichées dans la même zone ; puis écrivez une fonction de parcours via Js pour afficher une seule image à la fois ; enfin, appelez simplement cette fonction de temps en temps via une minuterie.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur DELL G3.
Comment implémenter le carrousel HTML :
1. Utilisez un contrôle comme zone d'affichage des images, et les images sont affichées dans la même zone ; >2. Écrivez une fonction de parcours via Js pour afficher une seule image à la fois,
peut masquer d'autres imagesstyle = " display：none "3.
<!-- 语言: 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;
} Effet d'exécution :
Recommandations d'apprentissage associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!