轮播图片，小圆点的可以实现，但是按钮的不能实现，哪位大神帮我看下哪里错了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
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;
}
</style>
</head>
<body>
<div>
<div>
<ul>
<li style="background: url('images/1.jpg'); display:block"></li>
<li style="background: url('images/2.jpg')"></li>
<li style="background: url('images/3.jpg')"></li>
<li style="background: url('images/4.jpg')"></li>
<li style="background: url('images/5.jpg')"></li>
<li style="background: url('images/6.jpg')"></li>
<li style="background: url('images/7.jpg')"></li>
<li style="background: url('images/8.jpg')"></li>
</ul>
</div>
<span></span>
<span></span>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-2.1.4.js"></script>
<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<0){
_index=7;
}
$('.box .btn ul li').eq(_index).addClass('sir').siblings().removeClass('sir');
$('.box .pic ul li').eq(_index).fadeIn().siblings().fadeOut();
});
</script>
</body>
</html>
慕村78936911回答
-
业余奶茶品鉴师
html中按钮的class没加上去望采纳
随时随地看视频慕课网APP
Html/CSS