轮播图片,小圆点的可以实现,但是按钮的不能实现,哪位大神帮我看下哪里错
*{
padding: 0;
margin: 0;
}
.box{
position: relative;
width: 100%;
height: 450px;
}
.box .pic{
position: relative;
width: 1120px;
height: 350px;
margin: 0 auto;
top: 100px;
}
.box .pic ul li{
position: absolute;
top: 0;
left: 0;
list-style: none;
width: 1120px;
height: 350px;
display: none;
}
.box .btn_left{
position: absolute;
top: 215px;
left: 130px;
width: 75px;
height: 70px;
cursor: pointer;
background: url("images/arrow.png") no-repeat 5px 0;
}
.box .btn_right{
position: absolute;
top: 215px;
right: 130px;
width: 72px;
height: 71px;
cursor: pointer;
background: url("images/arrow.png") no-repeat 2px -70px;
}
.box .btn{
position: absolute;
bottom:0;
left: 400px;
width: 593px;
height: 47px;
padding-left:50px ;
}
.box .btn ul{
width:400px;
height: 30px;
padding-left:100px;
padding-top: 9px;
}
.box .btn ul li{
list-style: none;
border: 1px solid white;
width: 20px;
height: 20px;
border-radius: 10px;
margin: 5px 12px;
float: left;
cursor: pointer;
}
.box .btn ul li.sir{
background: white;
}
<script>
$('.box .btn ul li').hover(function(){
var _index=$(this).index();
$(this).addClass('sir').siblings().removeClass('sir');
$('.box .pic ul li').eq(_index).fadeIn().siblings().fadeOut();
});
$('.box .btn_left').click(function(){
var _index=0;
var _index=$(this).index();
_index++;
if(_index>7){
_index=0;
}
$('.box .btn ul li').eq(_index).addClass('sir').siblings().removeClass('sir');
$('.box .pic ul li').eq(_index).fadeIn().siblings().fadeOut();
});
$('.box .btn_right').click(function(){
var _index=0;
var _index=$(this).index();
_index--;
if(_index |
免责声明:本内容仅代表回答会员见解不代表天盟观点,请谨慎对待。
版权声明:作者保留权利,不代表天盟立场。
|
|
|
|