body, html {
            width: 100%;
        }
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .haha {
            list-style-type: none;
        }
        .nav {
            width: 100%;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .warp {
            height: 300px;
            position: absolute;
        }
        .warp .haha {
            height: 300px;
            float: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .warp img {
            width: 100%;
            height: auto;
        }
        .nouse {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .point {
            width: 140px;
            margin: 0 auto;
        }
        .point > div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            margin-left: 30px;
            float: left;
        }
        .point > div:first-child {
            margin-left: 0;
        }
        .nav .point .on {
            background-color: red;
            width: 40px;
            height: 20px;
            border-radius: 10px;
        }

<div class="nav">
    <div class="warp">
        <div class="haha"><img src=""></div>
        <div class="haha"><img src=""></div>
        <div class="haha"><img src=""></div>
    </div>
    <div class="nouse">
        <div class="point">
            <div class="on"></div>
            <div></div>
            <div></div>
        </div>
    </div>

<script type="text/javascript">
    var p = 0;
    var len = $(‘.haha‘).length;
    var warp = $(‘.warp‘);
    var timer = null;
    var firstimg = $(‘.warp .haha‘).first().clone();
    $(‘.warp‘).append(firstimg).width($(‘.warp .haha‘).length * 100 + ‘%‘);
    $(‘.warp .haha‘).width(100 / $(‘.warp .haha‘).length + ‘%‘);
    var isMoved;
    //自动切换
    function change() {
        p++;
        if (p == $(‘.warp .haha‘).length) {
            p = 1;
            $(‘.warp‘).css(‘left‘, ‘0px‘);
        }
        ;
        warp.stop().animate({left: -p * 100 + ‘%‘}, 1000, function () {
            console.log(p);
            if (p == $(‘.warp .haha‘).length - 1) {
                $(‘.point div‘).eq(p - $(‘.warp .haha‘).length + 1).addClass("on").siblings("div").removeClass("on");
            } else {
                $(‘.point div‘).eq(p).addClass("on").siblings("div").removeClass("on");
            }
        });
    }
// timer =  setInterval(change, 2300);
    $(".point div").click(function () {
        clearInterval(timer);
        $(this).addClass("on").siblings("div").removeClass("on");
        p = $(this).index();
        warp.stop().animate({left: -p * 100 + ‘%‘}, 1000,function () {
//          timer = setInterval(change, 2300);
        }) ;
    })
        var pageX,pageY;
        $(‘.warp‘).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(touches.pageX>pageX-20 && Math.abs(touches.pageY-pageY)<Math.abs(touches.pageX-pageX)){
                if (isMoved){
                    return ‘‘;
                }
                isMoved=true
                clearInterval(timer);
                $(this).addClass("on").siblings("div").removeClass("on");
                p--;
                if (p<0){
                    warp.css({left: -(len)*100+"%"});
                    p=len-1;
                    $(".point div").removeClass(‘on‘).eq(p).addClass(‘on‘)
                } else {
                    $(".point div").removeClass(‘on‘).eq(p).addClass(‘on‘)
                }
                console.log(p)
                warp.stop().animate({left: -p * 100 + ‘%‘}, 1000,function () {
//          timer = setInterval(change, 2300);
                    isMoved=false;
                }) ;
            }
            else if(touches.pageX<pageX+20 && Math.abs(touches.pageY-pageY)<Math.abs(touches.pageX-pageX)){
                if (isMoved){
                    return ‘‘;
                }
                isMoved=true
                clearInterval(timer);
                $(this).addClass("on").siblings("div").removeClass("on");
                p++;
                if (p>len){
                    warp.css({left: 0+"%"});
                    p=1;
                    $(".point div").removeClass(‘on‘).eq(p).addClass(‘on‘)
                }else {
                    console.log(p>=len?0:p)
                    $(".point div").removeClass(‘on‘).eq(p>=len?0:p).addClass(‘on‘)
                }
                console.log(p)
                warp.stop().animate({left: -p * 100 + ‘%‘}, 1000,function () {
//          timer = setInterval(change, 2300);
                    isMoved=false;
                }) ;
            }
        })
  var x,y;
 $(document).mousedown(function(event){ //获取鼠标按下的位置
     x = event.pageX;
     y = event.pageY;
 });
 $(document).mouseup(function(event){//鼠标释放
     var newX = event.pageX;
     var newY = event.pageY;
     if(x<newX-20 && Math.abs(y-newY)<Math.abs(x-newX)){
         if (isMoved){
             return ‘‘;
         }
         isMoved=true
         clearInterval(timer);
         $(this).addClass("on").siblings("div").removeClass("on");
         p--;
         if (p<0){
             warp.css({left: -(len)*100+"%"});
             p=len-1;
             $(".point div").removeClass(‘on‘).eq(p).addClass(‘on‘)
         } else {
             $(".point div").removeClass(‘on‘).eq(p).addClass(‘on‘)
         }
         console.log(p)
         warp.stop().animate({left: -p * 100 + ‘%‘}, 1000,function () {
//          timer = setInterval(change, 2300);
             isMoved=false;
         }) ;
     }
     else if(x>newX+20 && Math.abs(y-newY)<Math.abs(x-newX)){
         if (isMoved){
             return ‘‘;
         }
         isMoved=true
         clearInterval(timer);
         $(this).addClass("on").siblings("div").removeClass("on");
         p++;
         if (p>len){
             warp.css({left: 0+"%"});
             p=1;
             $(".point div").removeClass(‘on‘).eq(p).addClass(‘on‘)
         }else {
             $(".point div").removeClass(‘on‘).eq(p>=len?0:p).addClass(‘on‘)
         }
         console.log(p)
         warp.stop().animate({left: -p * 100 + ‘%‘}, 1000,function () {
//          timer = setInterval(change, 2300);
             isMoved=false;
         }) ;
     }
 })
    $(‘img‘).on(‘mousedown‘,function (e) {
        e.preventDefault()
    })