pc端移动端兼容的大图轮播(代码片段)

   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()
    )