jQuery实现轮播图片

寒骁杰

已于 2023-06-13 18:08:27 修改

阅读量1.5k

点赞数

分类专栏：入门案例文章标签： jQuery

于 2018-07-26 14:36:18 首次发布

本文链接：https://blog.csdn.net/qq_36639124/article/details/81219677

版权

入门案例专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图片</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script>
	
	// 当前显示图片的下标,第一张
	var index = 0;
	$(function(){
		// 当前显示的图片淡出,之后当前显示的图片的下一张淡入
		// 3秒后执行定时轮播
		setInterval(function(){
			// 淡出
			$(".lun>li:eq("+index+")").fadeOut(500,'linear',function(){
				// 如果轮播到了或者超过最后一张,回到第一张
				if(index >= $(".lun>li").length-1){
					index=0;
				} else{// 否则,轮播下一张
					index++;
				}
				
				// 淡入
				$(".lun>li:eq("+index+")").fadeIn(500,'linear');
			});
		}, 3000);
	});

</script>

<style type="text/css">
	.hidden{
		display: none;
	}
	
	ul li img{
		width: 800px;
		height: 600px;
	}
	
	*{
		margin: 0px;
		padding: 0px;
	}
	
	ul li{
		list-style: none;
	}
	
</style>

</head>
<body>
	<ul class="lun">
		<li><img src="../images/1.jpg"/></li>
		<li class="hidden"><img src="../images/2.jpg"/></li>
		<li class="hidden"><img src="../images/3.jpg"/></li>
	</ul>
</body>
</html>