jquery如何实现滑动效果

具体代码如下：

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();
});

PC端如何实现将网站添加到桌面的功能

javascript实现复制div文本内容（实测有效）

JavaScript获取指定网站状态码查询代码（2种实现方法）

JS获取当前电脑浏览器基本信息

盘点50个全面的正则表达式集合，从基本验证到高级匹配

标签： js滑动效果, 监听鼠标按下事件, 监听鼠标松开事件, 监听鼠标移动事件, 阻止默认事件

上面是“jquery如何实现滑动效果”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4625.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！