jquery 左右滑动

你可以使用 jQuery 的 animate() 方法实现左右滑动。下面是一个简单的示例：

HTML:

<div class="slider">
  <ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
  </ul>
</div>

<button class="prev">Prev</button>
<button class="next">Next</button>

CSS:

.slider {
  width: 300px;
  overflow: hidden;
}

.slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 900px; /* 3 x 300px */
}

.slider ul li {
  float: left;
  width: 300px;
}

JavaScript:

$(document).ready(function() {
  var sliderWidth = $('.slider').width();
  var slideCount = $('.slider ul li').length;
  var currentPosition = 0;

  // Set the width of the ul element
  $('.slider ul').width(sliderWidth * slideCount);

  // Move the slider left
  $('.prev').click(function() {
    if (currentPosition > 0) {
      currentPosition--;
      $('.slider ul').animate({left: '+=' + sliderWidth}, 500);
    }
  });

  // Move the slider right
  $('.next').click(function() {
    if (currentPosition < slideCount - 1) {
      currentPosition++;
      $('.slider ul').animate({left: '-=' + sliderWidth}, 500);
    }
  });
});

这个示例中，我们创建了一个包含三个幻灯片的简单幻灯片。我们设置了一个固定的幻灯片宽度，并根据幻灯片数量设置了 ul 元素的宽度。然后，我们使用 animate() 方法来移动 ul 元素，从而实现左右滑动。通过单击“prev”和“next”按钮，我们可以向左或向右移动幻灯片。