在pc游览器端模拟移动端幻灯片

    用简单的思路写了下pc端模拟web端的图片滑动效果。。。

效果卡,bug多,完毕,继续学习c3方法写这个,iscroll就是可以模拟这种效果,还在学习中,难点《触点判断》

代码一份

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" href="idangerous.swiper.css">
    <style>body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        line-height: 1.5;
    }

    .device {
        width: 640px;
        height: 300px;
        padding: 30px 40px;
        border-radius: 20px;
        background: #111;
        border: 3px solid white;
        margin: 5px auto;
        position: relative;
        box-shadow: 0px 0px 5px #000;
    }

    .device .arrow-left {
        background: url(img/arrows.png) no-repeat left top;
        position: absolute;
        left: 10px;
        top: 50%;
        margin-top: -15px;
        width: 17px;
        height: 30px;
    }

    .device .arrow-right {
        background: url(img/arrows.png) no-repeat left bottom;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -15px;
        width: 17px;
        height: 30px;
    }

    .swiper-container {
        height: 300px;
        width: 640px;
    }

    .content-slide {
        padding: 20px;
        color: #fff;
    }

    .title {
        font-size: 25px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        left: 0;
        text-align: center;
        bottom: 5px;
        width: 100%;
    }

    .swiper-pagination-switch {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background: #999;
        box-shadow: 0px 1px 2px #555 inset;
        margin: 0 3px;
        cursor: pointer;
    }

    .swiper-active-switch {
        background: #fff;
    }

    .swiper-wrapper{
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 305px;
        z-index: 0;
    }
    .swiper-slide{
        float: left;

    }
    .swiper-slide img{
        -webkit-uers-select:none;
        -webkit-user-drag: none;
    }
    </style>
</head>
<body>
<div class="device">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide now"> <img src="slider1-1.png"> </div>
            <div class="swiper-slide"> <img src="slider1-2.png"> </div>
            <div class="swiper-slide">
                <div class="content-slide">
                    <p class="title">Slide with HTML</p>
                    <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="pagination"></div>
</div>
<script src="jquery-1.10.2.js"></script>
<script src="idangerous.swiper.js"></script>
<script>
        var drop = false;
        var $wrap = $('.swiper-wrapper');
        var $slide = $('.swiper-slide');
        var x = 363 , y = 38, X = 0,moveX = 0, D,tergetTouchIndex,beuffer;
        var arrPos = [],mx = 0;
        $slide.mousedown(function(e){
            var $this = $(this);
          //  $this.removeClass('now').addClass('now');
            tergetTouchIndex = $this.index() + 1;
            drop = true;
            console.log('index:' + tergetTouchIndex);
            $wrap.css({"cursor":"move"});
        });

        $slide.on('mousemove',function(e){
            if(drop){
                moveX = e.pageX;
                //console.log('弹起坐标:-》鼠标的X坐标:' + e.pageX+'   鼠标的Y坐标:' + e.pageY);
                var x = e.clientX, y = e.clientY;
                //判断鼠标运行方向
                var  direction = '';
                if (arrPos.length > 0) {
                    if (x > arrPos[0][0]) {
                        if (y == arrPos[0][1]) direction = '';
                        else {
                            if (y > arrPos[0][1]) direction = '右下';
                            else direction = '右上';
                        }
                    }
                    else {
                        if (x == arrPos[0][0]) {
                            if (y < arrPos[0][1]) direction = '';
                            else {
                                if (y > arrPos[0][1]) direction = '';
                            }
                        }
                        else {
                            if (y == arrPos[0][1]) direction = '';
                            else {
                                if (y > arrPos[0][1]) direction = '左上';
                                else direction = '左下';
                            }
                        }
                    }
                }

                if (arrPos.length < 1) arrPos.push(Array(x,y));
                else {
                    arrPos[0][0] = x;
                    arrPos[0][1] = y;
                    //console.log(direction);
                    if (direction == '' || direction == '左上' || direction == '左下') {
                        mx = getLeft();
                        mx = mx - 2.5;
                        $wrap.css({"left": mx + "px"});
                        D = 'left';
                    } else if (direction == '' || direction == '右上' || direction == '右下') {
                        mx = getLeft();
                        mx = mx + 2.5;
                        $wrap.css({"left": mx + "px"});
                        D = 'right';
                    }
                }
            }
            
            return false;
        });

        $slide.mouseup(function(e){
            drop = false;
//            console.log('弹起坐标:-》鼠标的X坐标:' + e.pageX+'   鼠标的Y坐标:' + e.pageY);
            getWrapXY();
            if (D == 'left') {
                if (tergetTouchIndex != 3) {
                    beuffer = 640 * tergetTouchIndex;
                    toMove(-beuffer);
                } else {
                    tergetTouchIndex--;
                    beuffer = 640 * tergetTouchIndex;
                    toMove(-beuffer);
                }

            } else if (D == 'right') {
                if (tergetTouchIndex != 1) {
                    if(tergetTouchIndex == 3){
                        tergetTouchIndex = tergetTouchIndex - 2  ;
                        beuffer = 640 * tergetTouchIndex;
                        toMove(-beuffer);
                    }else{
                        tergetTouchIndex = tergetTouchIndex - 2  ;
                        beuffer = 640 * tergetTouchIndex;
                        toMove(beuffer);
                    }

                } else if(tergetTouchIndex == 1){
                    toMove(0)
                }


            }
            $wrap.css({"cursor":"Default"});
        });

        /*
        * 取框架的左顶点坐标
        * */

        function getWrapXY(){
            var $w = $(".swiper-container").offset();
            console.log('X:' + $w.left +'   Y:' + $w.top);
        }

        /*
        * 算出鼠标在容器中的实际xy坐标
        * */
        function getInBoxXY(x,y){

        }

        /*
        * 移动前,外框的left值
        *
        * */
        function getLeft(){
            return parseInt($wrap.css('left'),10);
        }

        function getch(index){
            return $wrap.children().eq(index);
        }

        /*
        * 滑动动画
        * */
        function toMove(px){
            $wrap.animate({"left":px+'px'});
        }
</script>
</body>
</html>

 

 

 

posted @ 2014-03-21 00:57  黑色技术  阅读(375)  评论(0编辑  收藏  举报