轮播图实现教程-优快云博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#imgList img{
				width: 700px;
				height: 350px;
				position: absolute;
				left: 0;
				top: 0;
				float: left;
				opacity: 0;
			}
			
		</style>
	</head>
	<body>
		<div id="imgList">
			<img src="img/bg.jpg" alt="" style="opacity: 1;"/>
			<img src="img/bg1.jpg" alt="" />
			<img src="img/bg2.jpg" alt="" />
			<img src="img/bg3.jpg" alt="" />
			<img src="img/bg4.jpg" alt="" />
			<img src="img/bg5.jpg" alt="" />
		</div>
		<script src="js/jquery-2.2.1.min.js"></script>
		<script>
				var page = 0;
				var time =null;
				
			move();
			function move(){
				
				time = setInterval(function(){
					page++;
					if(page>5)
					{
						page=0;
					}
					//第一张显示，page++到第二张 将第二张的兄弟也就是第一张(其他兄弟不用管因为opacity都是0) 第一张隐藏完后紧接着回调 让当前（第二张）显示
					$("#imgList>img").eq(page).siblings().animate({"opacity":"0"},500,function(){			
						$("#imgList>img").eq(page).animate({"opacity":"1"},500);
					});
				
				},3000);
			}
				
			
		</script>
	</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5254955.html