大话主席的jquery.SuperSlide插件很好用,有很多效果都预设好了,省的自己在去写.

个人使用中一直有个问题就是电脑不支持拖拽,移动端不支持滑动功能.

尤其是做自适应项目时,用户体验不好.

今天抽空写了手机端拖拽,滑动代码,直接使用就好了.直接上代码.

电脑端拖拽代码

使用时,修改slider=$('.ban');改成你的class或id值,ismousedown = true要是不想使用的到时候,直接改成false就禁用了.

if(ismousedown = true){
let _start=0,_end=0,slider=$('.ban');
slider.on('mousedown',function(e){if(e.button==0){_start=e.clientX-slider.offset().left;}});
slider.on('mouseup',function(e){if(e.button==0){_end=e.clientX-slider.offset().left;}
if((_start-_end)<-50){slider.find('.prev').click();_end=0;
}else if((_start-_end)>50){slider.find('.next').click();_end=0;}
return false;
});
}

移动端滑动代码

使用时,修改slider=$('.ban');改成你的class或id值,istargettouches = true是不想使用的到时候,直接改成false就禁用了.

if(istargettouches = true){
let _start=0,_end=0,slider=$('.ban');
slider.on('touchstart',function(e){_start=e.originalEvent.targetTouches[0].pageX;});
slider.on('touchmove',function(e){_end=e.originalEvent.targetTouches[0].pageX;});
slider.on('touchend touchcancel',function(e){
if((_start-_end)<-50){slider.find('.prev').click();_end=0;
}else if((_start-_end)>50){slider.find('.next').click();_end=0;}
});
}

最近有不少人问，不能用，看来新手比较多，那我直接放一段完整的代码吧，如果你是新手放上这段代码后，直接用手机测试吧，下面是我在用的代码，复制粘贴就可以用了。

<script type="text/javascript">
jQuery(".ban").slide({titCell:".hd ul",autoPage:true,mainCell:".bd ul",effect:"leftLoop",vis:"auto",autoPlay:true,trigger:"click",mouseOverStop:false,interTime:4000});
if(istargettouches = true){
let _start=0,_end=0,slider=$('.ban');
slider.on('touchstart',function(e){_start=e.originalEvent.targetTouches[0].pageX;});
slider.on('touchmove',function(e){_end=e.originalEvent.targetTouches[0].pageX;});
slider.on('touchend touchcancel',function(e){
if((_start-_end)<-50){slider.find('.prev').click();_end=0;
}else if((_start-_end)>50){slider.find('.next').click();_end=0;}
});
}
if(ismousedown = true){
let _start=0,_end=0,slider=$('.ban');
slider.on('mousedown',function(e){if(e.button==0){_start=e.clientX-slider.offset().left;}});
slider.on('mouseup',function(e){if(e.button==0){_end=e.clientX-slider.offset().left;}
if((_start-_end)<-50){slider.find('.prev').click();_end=0;
}else if((_start-_end)>50){slider.find('.next').click();_end=0;}
return false;
});
}</script>

如果觉得本站内容对你有益，可对本站赞助，本站会不定时发布高质量内容。