<div class="<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;
      <!--width: 1÷item的数量乘以100%-->
      <div class="item"&gt;
        <img src="a.png" alt="a"&gt;
        <p>aaa</p>
      </div>
      <div class="item active"&gt;
        <img src="b.png" alt="b"&gt;
        <p>bbb</p>
      </div>
      <div class="item"&gt;
        <img src="c.png" alt="c"&gt;
        <p>ccc</p>
      </div>
      <div class="item"&gt;
        <img src="d.png" alt="d"&gt;
        <p>ddd</p>
      </div>
      <div class="item"&gt;
        <img src="e.png" alt="e"&gt;
        <p>eee</p>
      </div>
      <div class="item"&gt;
        <img src="f.png" alt="f"&gt;
        <p>ffff</p>
      </div>
    </div>
  </div>
</div></pre>

$(function(){ // 循环数据 假设有个数组，有10条数据 // var arr = [1,2,3,4,5,6,7,8,9,10]; // var arr_len = arr.length; // var Box = ''; // $('.lists').append(Box); // for (var i = 0; i < arr_len;i++){ // var newDiv = document.createElement('div'); // newDiv.innerHTML = '' + // (i+1)+ // '

'; // 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 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; }