大家好，欢迎来到IT知识分享网。
大概思路：
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;
}
运行效果：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/34942.html
