当前位置：首页 > jquery

jquery左右滑动

2026-03-02 19:19:44jquery

jQuery实现左右滑动效果的方法

使用animate()方法实现滑动

通过jQuery的animate()方法可以平滑地改变元素的CSS属性，实现左右滑动效果。需要设置position为relative或absolute。

// 向右滑动
$("#element").animate({left: '+=100px'}, 500);

// 向左滑动
$("#element").animate({left: '-=100px'}, 500);

使用slide系列方法

jQuery提供专门的滑动方法，适合显示/隐藏元素时的滑动效果。

// 向右展开
$("#element").slideDown("slow");

// 向左收起
$("#element").slideUp("fast");

// 切换滑动状态
$("#element").slideToggle(300);

结合CSS transform实现高性能滑动

现代浏览器中，使用CSS transform性能更好，可通过jQuery控制。

// 向右滑动200px
$("#element").css('transform', 'translateX(200px)');

// 带动画的版本
$("#element").css({'transition': 'transform 0.3s ease', 'transform': 'translateX(200px)'});

实现轮播图滑动效果

常见的左右滑动应用是轮播图，需要配合事件处理。

var currentSlide = 0;
var slides = $(".slide");
var slideCount = slides.length;

// 下一张
$("#next").click(function(){
  currentSlide = (currentSlide + 1) % slideCount;
  $(".slider-container").animate({left: -currentSlide * 100 + '%'});
});

// 上一张
$("#prev").click(function(){
  currentSlide = (currentSlide - 1 + slideCount) % slideCount;
  $(".slider-container").animate({left: -currentSlide * 100 + '%'});
});

触摸屏友好实现

对于移动设备，可以添加触摸事件支持。

var startX, moveX;
$("#slider").on("touchstart", function(e){
  startX = e.originalEvent.touches[0].pageX;
});

$("#slider").on("touchmove", function(e){
  moveX = e.originalEvent.touches[0].pageX;
  var diff = moveX - startX;
  $(this).css('transform', 'translateX(' + diff + 'px)');
});

$("#slider").on("touchend", function(){
  if(moveX - startX > 50) {
    // 向右滑动足够距离，触发上一页
  } else if(startX - moveX > 50) {
    // 向左滑动足够距离，触发下一页
  }
  $(this).css('transform', 'translateX(0)');
});