<div class="content">
<button class="left">left</button>
<button class="right">right</button>
<div class="index"></div>
<div class="lists">
<!--<!–width: item的数量÷3乘以100%–>-->
<div class="box">
<!--width: 1÷item的数量乘以100%-->
<div class="item">
<img src="a.png" alt="a">
<p>aaa</p>
</div>
<div class="item active">
<img src="b.png" alt="b">
<p>bbb</p>
</div>
<div class="item">
<img src="c.png" alt="c">
<p>ccc</p>
</div>
<div class="item">
<img src="d.png" alt="d">
<p>ddd</p>
</div>
<div class="item">
<img src="e.png" alt="e">
<p>eee</p>
</div>
<div class="item">
<img src="f.png" alt="f">
<p>ffff</p>
</div>
</div>
</div>
</div>
<script>
$(function(){
// 循环数据 假设有个数组,有10条数据
// var arr = [1,2,3,4,5,6,7,8,9,10];
// var arr_len = arr.length;
// var box = '<div class="box" style="width: '+arr_len/3*100+'%;"></div>';
// $('.lists').append(box);
// for (var i = 0; i < arr_len;i++){
// var newDiv = document.createElement('div');
// newDiv.innerHTML = '<img src=""/>'+
// '<p>' +
// (i+1)+
// '</p>';
// newDiv.className = 'item '+(i==1?'active':'');
// newDiv.style = 'width: '+1/arr_len*100+'%;';
// newDiv.onclick = (function(ind) {
// return function () {
// index = ind-1;
// console.log(ind)
// $(".box").animate({left: -index*100/3+"%"})
// $(".item").removeClass('active')
// $($(".item")[index+1]).addClass('active');
// $('.index').text(index+2)
// }
// })(i) ;
// $('.box').append(newDiv);
// } var arr_len = $('.item').length; $('.box').css({width: arr_len/3*100+'%'})
$('.item').css({width: 1/arr_len*100+'%'}) $('.item').on('click',function (e) {
var _this = $(e.target);
if (!_this.hasClass('item')){
_this = _this.parents('.item');
}
index = _this.index('.item')-1;
$(".box").animate({left: -index*100/3+"%"})
$(".item").removeClass('active')
$($(".item")[index+1]).addClass('active');
$('.index').text(index+2)
}) var index = 0;
var len = arr_len;
var temp = true;
var pageX,pageY;
$('.content').on('touchstart',function (e) {
var touches = e.originalEvent.targetTouches[0];
pageX = touches.pageX;
pageY = touches.pageY;
}).on('touchmove',function (e) {
var touches = e.originalEvent.targetTouches[0];
if (pageX>touches.pageX+20){
left()
}else if (pageX<touches.pageX-20){
right()
}
})
$(".left").on('click',left)
$(".right").on('click',right)
function left() {
console.log(index,temp,'left')
if (index < len-2&&temp){
index++;
move(index)
}
}
function right() {
if (index > 0&&temp){
index--;
move(index)
}
}
function move(index) {
if (temp){
temp = false;
var left = $(".box").offset().left;
$(".box").animate({left: -index*100/3+"%"},function () {
temp = true;
})
$(".item").removeClass('active')
$($(".item")[index+1]).addClass('active');
$('.index').text(index+2)
} } })
.lists {
position: relative;
height: 100px;
overflow: hidden;
}
.box {
position: absolute;
}
.item {
float: left;
background: #008000;
height: 100px;
}
.item img {
width: 20px;
display: block;
margin: 0 auto;
}
.item p {
text-align: center;
}
.item.active {
background: #0000FF;
font-size: 30px;
}
.item.active img {
width: 40px;
}
.item.active p {
font-size: 30px;
}