<div class="content">

            <button class="left">left</button>

            <button class="right">right</button>

            <div class="index"></div>

            <div class="lists">

                <!--&lt;!&ndash;width: item的数量÷3乘以100%&ndash;&gt;-->

                <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;

            }