JavaScript淡入淡出的轮播图，非常适合萌新

最新推荐文章于 2024-07-30 22:36:34 发布

Onl2358

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量125

点赞数 1

文章标签： javascript css

本文链接：https://blog.csdn.net/shsjkhjhs/article/details/108773453

版权

JavaScript淡入淡出的轮播图效果，很简单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				/*重置样式*/
				margin: 0;
				padding: 0;
			}
			/*设置外层盒子大小*/
			.banner_img{
				width: 1080px;/*宽度1080*/
				height: 432px;/*高度432*/
				overflow: hidden;/*溢出隐藏*/
				margin: 0 auto;/*边距自适应*/
			}
			.imgList li{
				list-style: none;/*清楚li的小点点*/
				opacity: 0;/*淡入时的透明度*/
				transition: all 1.5s;/*淡入时会有1.5s的过渡效果*/
			}
			.List.active{
				z-index: 10;/*叠加的级别*/
				opacity: 1;/*淡出时的透明度为1*/
			}
			.List{
				position: absolute;/*让所有li标签中的图片叠加在一块*/
			}
		</style>
	</head>
	<body onload="loadImage()"> 
		<div class="banner_img">
			<ul class="imgList">
			 	<li class="List"><img src="img/0.jpg"/></li>
			 	<li class="List"><img src="img/1.jpg"/></li>
			 	<li class="List"><img src="img/2.jpg"/></li>
			 	<li class="List"><img src="img/3.jpg"/></li>
			 	<li class="List"><img src="img/4.jpg"/></li>
			 	<li class="List"><img src="img/5.jpg"/></li>
			 	<li class="List"><img src="img/6.jpg"/></li>
			 	<li class="List"><img src="img/7.jpg"/></li>
			</ul>
		</div>
		<script type="text/javascript">
			//获得所有图片
			var images=document.getElementsByClassName("List");
			//index下标用来代表图片
			var index=0;
			//定义一个清除叠加的方法
			function clearIndex () {
				for (var i=0;i<images.length;i++) {
					images[i].className="List"
				}
			}
			//定义一个图片轮播的方法
			function loadImage () {
				clearIndex()
				images[index].className="List active"
				index++;
				if(index>=8){
					index=0;
				}
				setTimeout(loadImage,1000);
			}
		</script>
	</body>
</html>

Onl2358

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript淡入淡出的轮播图，非常适合萌新

JavaScript淡入淡出的轮播图效果，很简单<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ /*重置样式*/ margin: 0; padding: 0; } /*设置外层盒子大小*/ .banner_img{
复制链接

扫一扫