具体代码如下:
var slider = $('#div'); var currentPos = 0; //记录当前的位置 var sliderWidth = slider.width(); //获取图片宽度 var len = slider.children('img').length; //获取图片数量 //监听鼠标按下事件 slider.on('mousedown', function(e) { var startX = e.pageX; //获取鼠标按下时的坐标 var left = parseFloat(slider.css('left')); //获取初始位置 var endX; //监听鼠标移动事件 slider.on('mousemove', function(e) { endX = e.pageX; //获取鼠标移动时的坐标 slider.css('left', left + endX - startX); //设置图片位置 }); //监听鼠标松开事件 slider.on('mouseup', function(e) { $(this).off('mousemove'); //取消鼠标移动事件的监听 var direction = swipeDirection(startX, 0, endX, 0); //判断手势方向 if (direction === 'left' && currentPos < len - 1) { currentPos++; //向左滑动,图片位置加1 slider.animate({ left: '-=' + sliderWidth }); } else if (direction === 'right' && currentPos > 0) { currentPos--; //向右滑动,图片位置减1 slider.animate({ left: '+=' + sliderWidth }); } else { slider.animate({ left: '-=' + (endX - startX) //回到原来的位置 }); } }); //阻止默认事件 e.preventDefault(); });
javascript语法如何把json文件输出到html页面上
标签: js滑动效果, 监听鼠标按下事件, 监听鼠标松开事件, 监听鼠标移动事件, 阻止默认事件
上面是“jquery如何实现滑动效果”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。
当前网址:https://m.ipkd.cn/webs_4625.html
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!