HTML:
<div class="col-md-6 floatL show-img">
<ul class="show-img-list clearfix">
<li>
<a href="" target="_blank">
<img src="img/show1.png"/>
</a>
</li>
<li>
<a href="" target="_blank">
<img src="img/show2.png"/>
</a>
</li>
<li>
<a href="" target="_blank">
<img src="img/show3.png"/>
</a>
</li>
<li>
<a href="" target="_blank">
<img src="img/show4.png"/>
</a>
</li>
<li>
<a href="" target="_blank">
<img src="img/show5.png"/>
</a>
</li>
<li>
<a href="" target="_blank">
<img src="img/show6.png"/>
</a>
</li>
</ul>
<div class="arrow">
<span class="arrow_left floatL"><</span>
<span class="arrow_right floatR">></span>
</div>
</div>
CSS:
.show-img{
height: 436px;
padding-right: 0px;
padding-left: 0px;
position: relative;
}
.show-img .show-img-list{
height: 100%;
position: relative;
}
.show-img .show-img-list li{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.show-img .show-img-list li a{
display: block;
height: 100%;
text-align: center;
}
.show-img .show-img-list li a img{
width: 100%;
height: 100%;
}
.show-img .arrow{
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.show-img .arrow span{
display: block;
width: 40px;
cursor: pointer;
height: 60px;
font-size: 28px;
text-align: center;
line-height: 60px;
background: rgba(0,0,0,0.1);
}
js:
$(function(){
var num=0;
//自动轮播
var myVar = setInterval(function(){ myTimer() }, 5000);
function myTimer(){
num++;
if(num==$(".show-img-list li").length){
num=0;
}
$(".show-img-list li").eq(num-1).fadeIn().siblings("li").fadeOut();
}
//点击轮播
$(".arrow_right").click(function(){
num++;
if(num==$(".show-img-list li").length){
num=0;
}
$(".show-img-list li").eq(num-1).fadeIn().siblings("li").fadeOut();
});
$(".arrow_left").click(function(){
num--
if(num==-1){
num=$(".show-img-list li").length-1;
}
$(".show-img-list li").eq(num-1).fadeIn().siblings("li").fadeOut();
});
})