<style type="text/css">
*{margin: 0;padding: 0;}
.fl{
float: left;
}
.fr{
float: right;
}
.cl:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.cl{zoom:1}
.banner{
width: 800px;
height: 265px;
margin: 40px auto;
position: relative;
overflow: hidden;
}
.banner ul li,.banner ol li{
list-style: none;
}
.banner ul{
width: 800px;
position: absolute;
}
.banner ul li img{
width: 400px;
}
.banner ol{
position: absolute;
top: 0;
width: 40px;
left: calc((100% - 40px)/2);
}
.banner ol li{
width: 40px;
height: 40px;
border-radius: 50%;
background: #00DD1C;
color: #fff;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.banner ol li.active{
background: #007FFF;
}
.btns {
margin-top: 10px auto;
}
.btns b{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: #039702;
color: #fff;
display: block;
float: left;
margin: 0 10px;
cursor: pointer;
}
.btns b:hover{
background: #00A03C;
}
</style>
<div class="banner">
<ul>
<li class="cl">
<img class="fl" src="images/img3.jpg" />
<div class="txt fr">
<h3>1</h3>
<p>这是1</p>
</div>
</li>
<li class="cl">
<img class="fl" src="images/img4.jpg" />
<div class="txt fr">
<h3>2</h3>
<p>这是2</p>
</div>
</li>
<li class="cl">
<img class="fl" src="images/img2.jpg" />
<div class="txt fr">
<h3>3</h3>
<p>这是3</p>
</div>
</li>
<li class="cl">
<img class="fl" src="images/img1.jpg" />
<div class="txt fr">
<h3>4</h3>
<p>这是4</p>
</div>
</li>
<li class="cl">
<img class="fl" src="images/img1.jpg" />
<div class="txt fr">
<h3>5</h3>
<p>这是4</p>
</div>
</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div class="btns cl">
<b class="prev">上一个</b>
<b class="next">下一个</b>
</div>
<script>
$(function(){
var Hg = $('.banner ul li').height();
var lg = $('.banner ul li').length;
$('.banner ul').height(Hg*lg);
$('.banner ul li').each(function(index,i){
$(this).attr('vl',index);
})
$('.banner ol li').click(function(){
var index = $(this).index();
con(index)
})
$('.btns .next').click(function () {
var _index = $(".banner ul>li:first-child").attr('vl');
$(".banner ul").stop().animate({top: -Hg},600, function () {
$(".banner ul>li").eq(0).appendTo($(".banner ul"));
$(".banner ul").css('top','0px');
});
console.log(_index);
con(_index)
})
$('.btns .prev').click(function () {
$(".banner ul").css('top',-Hg);
$(".banner ul>li").eq(lg - 1 ).prependTo($(".banner ul"));
$(".banner ul").stop().animate({top:"0px"},600);
var _index = $(".banner ul>li:first-child").attr('vl');
console.log(_index);
con(_index)
})
function con(index){
$('.banner ol li').eq(index).addClass('active').siblings().removeClass('active');
//$('.banner ol li').parent('ol').siblings('ul').animate({'top': - Hg * index},1000);
}
})
</script>
prependTo,
appleTo