<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="content">
<button class="left">left</button>
<button class="right">right</button>
<div class="index"></div>
<div class="lists">
<div class="box">
<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 src="static/js/lib/jquery.min.js"></script>
<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/3100+'%;"></div>';
// $('.lists').append(box);
// for (var i = 0; i < arr_len;i++){
// var newDiv = document.createElement('div');
// newDiv.innerHTML = '<img src="static/images/search-icon.png"/>'+
// '<p>' +
// (i+1)+
// '</p>';
// newDiv.className = 'item '+(i==1?'active':'');
// newDiv.style = 'width: '+1/arr_len100+'%;';
// 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)
}
}
})
</script>
</body>
</html>
