自己写的轮播图，用隐藏写的，但左右两个按钮不知道怎么和分页器图片同步
小白一个，左右两个按钮不知道怎么同步，网上教程的都是用推动。加超过范围隐藏。但我还是想先搞懂用隐藏消失做<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
ul {
list-style: none;
}
.box {
width: 346px;
height: 300px;
overflow: hidden;
position: relative;
}
.box_img {
width: 346px;
height: 250px;
overflow: hidden;
}
.box_img ul li {
display: none;
}
.box_img a {
display: block;
width: 346px;
height: 250px;
}
.box_xb {
position: absolute;
bottom: 0;
text-align: center;
width: 346px
}
.box_xb a {
display: inline-block;
padding: 2px 10px;
font-size: 10px;
background: #fff;
margin: 0 5px;
color: #000;
}
.box_xb a.active {
background: red;
color: #000;
}
.box-anniu a {
display: block;
width: 20px;
height: 20px;
background: red;
}
#left {
position: absolute;
left: 0;
}
#right {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="box_img">
<ul>
<li><a href="#" style="background: #f90;"></a></li>
<li><a href="#" style="background: #f09;"></a></li>
<li><a href="#" style="background: #0f9;"></a></li>
<li><a href="#" style="background: #90f;"></a></li>
<li><a href="#" style="background: #09f;"></a></li>
<li><a href="#" style="background: #f90;"></a></li>
<li><a href="#" style="background: #f09;"></a></li>
<li><a href="#" style="background: #0f9;"></a></li>
<li><a href="#" style="background: #90f;"></a></li>
</ul>
</div>
<div class="box_xb"></div>
<div class="box-anniu">
<a href="javascript:" class="left" id="left"></a>
<a href="javascript:" class="right" id="right"></a>
</div>
</div>
<script type="text/javascript">
$(function() {
var len = $(".box_img ul li").length;
var size = $('.box_img ul li').size();
for (var i = 1; i <= size; i++) {
$('.box_xb').append('<a href="javascript:(void)">' + i + '</a>')
}
$('.box_img li').eq(0).show();
var n;
$('.box_xb a').click(function() {
$(this).addClass('active').siblings().removeClass('active');
var index = $(this).index();
n = index;
$('.box_img li').eq(index).fadeIn().siblings().fadeOut();
});
// $('#left').click(function() {
// $('.box_img li').eq(0).show();
// var n;
// var index = $(".box_xb a").index();
// n = index;
// $('.box_img li').eq(index-1).fadeIn().siblings().fadeOut();
// });
});
</script>
