用简单的思路写了下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>