pc端移動端相容的大圖輪播

標籤：ddc   mat   point   amp   page   lis   var   asc   sed   

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

最後別忘記引入jq奧 

pc端移動端相容的大圖輪播