fadeIn,fadeOut函数 图片轮播

先记下代码,防止遗忘:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
	<script>
		$(document).ready(function(){
			var index=0;
			var len=$(".picBox li").length;
			$(".picBox li").fadeOut(0).eq(index).fadeIn(0);
			function rollOne(){
				if(index <len-1){
				$(".picBox li").eq(index).fadeOut(600).next().fadeIn(600);
				index++;
			}else if(index == len-1){
					$(".picBox li").eq(index).fadeOut(600).siblings().eq(0).fadeIn(600);
					index=0;
				}
			}

			var startRollOne=setInterval(rollOne,2000);
			$(".box").hover(function () {
				clearInterval(startRollOne);
			}, function () {
				startRollOne=setInterval(rollOne,2000);
			});
		});
	</script>
	<style>
		.box{
			width: 200px;
			height: 260px;
			margin: 160px auto;
			position: relative;
		}
		.box p{
			text-align: center;
		}
		.picBox{
			margin: 0px;
			padding: 0px;
			list-style: none;
			width: 1500px;
			position: absolute;
		}
		.picBox:hover{
			cursor: pointer;
		}
		.picBox li{
			position: absolute;
			display: none;
			top:0px;
			left:0px;
		}
		.picBox img{
			width: 200px;
			height: 240px;
		}
	</style>
</head>
<body>
<div class="box">
	<p> 图片轮播</p>
	<ul class="picBox">
		<li><img src="a.jpg" /></li>
		<li><img src="b.jpg" /></li>
		<li><img src="c.jpg" /></li>
		<li><img src="d.jpg" /></li>
		<li><img src="e.jpg" /></li>
	</ul>
</div>
</body>
</html>


你可能感兴趣的:(图片轮播,fadein,fadeout)