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