jQuery常用的轮播图

jQuery常用的轮播图

轮播图css代码！！！

*{
	margin:0;
	padding:0;
}
.da{
	 1200px;
	height: 440px;
	margin:30px auto;
	cursor:pointer;
}
.zuo{
	 880px;
	height: 440px;
	float: left;
	position: relative;
}
.zuo>div{
	display: none;
}
.zuo>div.show{
	display: block;
}
.xia{
	height: 50px;
	position: absolute;
	top:350px;
	left: 0;
	right: 0;
	padding: 20px;
	background: rgba(0,0,0,0.3);
}
.xia a{
	color: #fff;
	font-size: 12px;
}
.xia p{
	color: #ccc;
	font-size: 14px;
	margin-top: 10px;
}
.you{
	 320px;
	height: 440px;
	background: #f0f0f0;
	float: left;
}
.you ul li{
	height: 53px;
	border-bottom: 1px solid #fff;
	padding: 10px 0 10px 10px;
}
.tu{
	 80px;
	float: left;
}
.tu img{
	border: 1px solid #ccc;
}
.zi{
	 220px;
	float: left;
	margin-left: 8px;
}
.zi a{
	color: #000;
	font-size: 12px;
}
.zi p{
	font-size: 14px;
	color: #999;
	margin-top: 10px;
	text-decoration:underline;
}
.xian{
	background: #fff;
}

---

轮播图html代码！！！

<div class="da">
	<div class="zuo">
		<div class="show">
		    <img src="img/1.jpg" />
		    <div class="xia">
		    	<a href="#">不管未来的路如何的难走，都是自己选的</a>
		    	<p>人心难测，自己过好就行，开心就好</p>
		</div>
		</div>
		<div>
		    <img src="img/2.jpg" />
		    <div class="xia">
		    	<a href="#">不管未来的路如何的难走，都是自己选的</a>
		    	<p>人心难测，自己过好就行，开心就好</p>
		    </div>
		</div>
		<div>
		    <img src="img/3.jpg" />
		    <div class="xia">
		    	<a href="#">不管未来的路如何的难走，都是自己选的</a>
		    	<p>人心难测，自己过好就行，开心就好</p>
		    </div>
		</div>
		<div>
		    <img src="img/4.jpg" />
		    <div class="xia">
		    	<a href="#">不管未来的路如何的难走，都是自己选的</a>
		    	<p>人心难测，自己过好就行，开心就好</p>
		    </div>
		</div>
		<div>
		    <img src="img/5.jpg" />
		    <div class="xia">
		    	<a href="#">不管未来的路如何的难走，都是自己选的</a>
		    	<p>人心难测，自己过好就行，开心就好</p>
		    </div>
		</div>
		<div>
		    <img src="img/6.jpg" />
		    <div class="xia">
		    	<a href="#">不管未来的路如何的难走，都是自己选的</a>
		    	<p>人心难测，自己过好就行，开心就好</p>
		    </div>
		</div>
	</div>
<div class="you">
	<ul>
		<li class="xian">
			<div class="tu">
				<img src="img/01.jpg" />
			</div>
			<div class="zi">
				<h6><a href="#">不管未来的路如何的难走，都是自己选的</a></h6>
				<p>2017-06-01</p>
			</div>
		</li>
		<li>
			<div class="tu">
				<img src="img/02.jpg" />
			</div>
			<div class="zi">
				<h6><a href="#">不管未来的路如何的难走，都是自己选的</a></h6>
				<p>2017-06-01</p>
			</div>
		</li>
		<li>
			<div class="tu">
				<img src="img/03.jpg" />
			</div>
			<div class="zi">
				<h6><a href="#">不管未来的路如何的难走，都是自己选的</a></h6>
				<p>2017-06-01</p>
			</div>
		</li>
		<li>
			<div class="tu">
				<img src="img/04.jpg" />
			</div>
			<div class="zi">
				<h6><a href="#">不管未来的路如何的难走，都是自己选的</a></h6>
				<p>2017-06-01</p>
			</div>
		</li>
		<li>
			<div class="tu">
				<img src="img/05.jpg" />
			</div>
			<div class="zi">
				<h6><a href="#">不管未来的路如何的难走，都是自己选的</a></h6>
				<p>2017-06-01</p>
			</div>
		</li>
		<li>
			<div class="tu">
				<img src="img/06.jpg" />
			</div>
			<div class="zi">
				<h6><a href="#">不管未来的路如何的难走，都是自己选的</a></h6>
				<p>2017-06-01</p>
			</div>
		</li>
	</ul>
</div>
</div>

---

轮播图jquery的代码！！！

$(function(){
	var index = 0,timer = null;
	$(".you li").mouseenter(function(){
		index = $(this).index();
		$(this).addClass("xian").siblings().removeClass("xian");
		$(".zuo>div").eq(index).show().siblings().hide().children(".xia").hide();
		$(".zuo>div").eq(index).find(".xia").slideDown();
	});
	function start(){
		timer = setInterval(function(){
			index++;
			if(index==6){index=0};
			$(".you li").eq(index).addClass("xian").siblings().removeClass("xian");
			$(".zuo>div").eq(index).show().siblings().hide().children(".xia").hide();
			$(".zuo>div").eq(index).find(".xia").slideDown();
			},1000);
		};
	start();
	$(".da").mouseenter(function(){
		clearInterval(timer);
	}).mouseleave(function(){
		start();
	});
});

---

轮播图的效果！！！

---

今天做的轮播图很多地方都会用这样的，希望能帮到大家！！！

其实原理都是一样，不过jQuery的原理和js原理都一样，不过不同的是jQuery已经把相关的方法封装成了函数，兼容性的相关设置也已经写好。