JQ实现淡进淡出轮播

实现图片自动轮播，鼠标悬浮，轮播停止
<!DOCTYPE html>
<html lang="ZH">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
	<style>
		#container{
			position: relative;
			width: 1066px;
			height: 600px;
			margin: 50px auto;
		}
		img{
			width: 100%;
			height: 100%;
			position: absolute;
			display: none;
		}
		a{
			position: absolute;
			top:50%;
			width: 40px;
			height: 50px;
			line-height: 45px;
			text-align: center;
			border-radius: 30%;
			text-decoration: none;
			background: rgba(0, 0, 0, .5);
			color: rgba(0, 0, 0, .8);
			font-size: 50px;
			font-weight: 700;
			display: inline-block;
			border: 1px solid rosybrown;
		}
		a:hover{
			background-color: black;
			color: rgba(255, 255, 255, .8)
		}
		.left{
			left: 2%;
		}
		.right{
			right: 2%;
		}
		ul{
			position: absolute;
			bottom: 10px;
			left: 32%;
		}
		ul li{
			list-style: none;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: gray;
			float: left;
			margin-right: 7px;
			
		}
		ul li:hover{
			cursor: pointer;
		}
		.first{
			background-color: red;
		}
		.active{
			display: inline-block;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="content">
			<img class="active" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795543&di=7f780a82a4eaa5db98ad5208a6696e88&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0147d857c01f8c0000012e7ea7acb3.jpg%402o.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795563&di=e2e8f721b430d33f2142d0a0ca983396&imgtype=jpg&er=1&src=http%3A%2F%2Fp1.gexing.com%2FG1%2FM00%2F4C%2F59%2FrBACJlTi6rKgv14aAAJdt559sD0951.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795575&di=634b70dfa2ab0c22c2e844dfc311a0c9&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019e475543eda80000019ae941173a.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795589&di=a834a5a985ec2851194278a4bfab4cc3&imgtype=jpg&er=1&src=http%3A%2F%2Fp17.qhimg.com%2Fd%2F_open360%2Fcg0910%2F34.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795601&di=518f596e233f9af3204138cee416bccb&imgtype=jpg&er=1&src=http%3A%2F%2Fattach.bbs.wps.cn%2Fattachments%2Fforum%2F201408%2F09%2F115558kz8c8z8odvigk1q2.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795627&di=bc78a312980087fd514c1dfd7eba3528&imgtype=jpg&er=1&src=http%3A%2F%2Fp15.qhimg.com%2Fd%2F_open360%2Fdesign0906%2F7.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795640&di=bca56fe41363e607986f23c49c002145&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d8e857fa09faa84a0e282bf7421d.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530200932974&di=7e031529b46e44908e7e0fdd0deb86dd&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Ff11f3a292df5e0fefdad8d415f6034a85edf723c.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530200944217&di=345f3f040e597a54ee3008ea337c6b6b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010b9c57748a930000012e7e419c08.png%402o.png" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795675&di=a5f8136ecc7b83e05368b809c3f4fbd8&imgtype=jpg&er=1&src=http%3A%2F%2Fp4.gexing.com%2Fshaitu%2F20121117%2F0223%2F50a684878ca1b.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530200956981&di=927ea8049cd38e73c67c936b19223adf&imgtype=0&src=http%3A%2F%2Fp16.qhimg.com%2Fd%2F_open360%2Fdm0715%2F7.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530200956981&di=81e7142d71115979ee23fb546c073403&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F016ef457ba616f0000018c1b96a27c.jpg" alt="">
		</div>
		<a class="left" href="#"><</a>
		<a class="right" href="#">></a>
		<ul>
			<li class="first"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
		</ul>
	</div>
</body>
</html>
<script>
	var $img=$("img");
	var $li=$("li");
	var $left=$(".left");
	var $right=$(".right");
	var $container=$("#container");
	var index=0;
	var onOff=true;
	var timer=null;
	var clearInter=null;

	$li.mouseover(function(){
		index=$(this).index();
		tab();
	});
	$left.click(function(){
		if(onOff){
			onOff=false;
			index--;
			if(index<0){
				index=11;
			}
			tab();
		}
	})
	$right.click(function(){
		bannerScroll();
	})
	function bannerScroll(){
		if(onOff){
			onOff=false;
			index++;
			if(index>11){
				index=0;
			}
			tab();
		}
	}
	clearInter=setInterval(bannerScroll,500);
	$container.hover(function(){
		clearInterval(clearInter)
	},function(){
		clearInter=setInterval(bannerScroll,500);
	})
	function tab(){
		$li.eq(index).addClass("first").siblings().removeClass();
		$img.eq(index).fadeIn(500).siblings().fadeOut(500,function(){
			clearTimeout(timer);
			timer=setTimeout(function(){
				onOff=true;
			},500)			
		});
	}
</script>
JQ实现淡进淡出轮播

猜你喜欢
