jQuery常用的轮播图
轮播图css代码！！！
*{
margin:0;
padding:0;
}
.da{
width: 1200px;
height: 440px;
margin:30px auto;
cursor:pointer;
}
.zuo{
width: 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{
width: 320px;
height: 440px;
background: #f0f0f0;
float: left;
}
.you ul li{
height: 53px;
border-bottom: 1px solid #fff;
padding: 10px 0 10px 10px;
}
.tu{
width: 80px;
float: left;
}
.tu img{
border: 1px solid #ccc;
}
.zi{
width: 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已经把相关的方法封装成了函数，兼容性的相关设置也已经写好。
