jquery移动端触摸左右滑动切换图片

可以使用touchstart、touchmove和touchend事件来实现移动端触摸左右滑动切换图片。下面是一个简单的示例代码：

HTML代码：

<div class="slider">
  <ul>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
  </ul>
</div>

CSS代码：

.slider {
  position: relative;
  overflow: hidden;
}
.slider ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 300%;
  position: relative;
}
.slider li {
  float: left;
  width: 33.333%;
}
.slider img {
  width: 100%;
  height: auto;
}

JavaScript代码：

$(function() {
  var slider = $('.slider');
  var sliderUl = slider.find('ul');
  var sliderLi = sliderUl.find('li');
  var sliderImg = sliderLi.find('img');
  var count = sliderLi.length;
  var currentIndex = 0;
  var startX = 0;
  var endX = 0;

  sliderImg.on('dragstart', function(event) {
    event.preventDefault();
  });

  sliderUl.on('touchstart', function(event) {
    startX = event.originalEvent.touches[0].pageX;
  });

  sliderUl.on('touchmove', function(event) {
    endX = event.originalEvent.touches[0].pageX;
    if (endX - startX > 50) {
      currentIndex--;
      if (currentIndex < 0) {
        currentIndex = count - 1;
      }
      move(currentIndex);
    } else if (endX - startX < -50) {
      currentIndex++;
      if (currentIndex >= count) {
        currentIndex = 0;
      }
      move(currentIndex);
    }
  });

  function move(index) {
    var left = -index * 100 / 3 + '%';
    sliderUl.animate({
      'left': left
    }, 300);
  }
});

代码解释：

1. 首先获取slider、sliderUl、sliderLi和sliderImg等元素，并且获取sliderLi的个数count和当前图片的索引值currentIndex。
2. 然后给sliderImg绑定dragstart事件，防止图片在移动时出现拖拽效果。
3. 接着给sliderUl绑定touchstart和touchmove事件，分别在手指按下和移动时记录开始位置和结束位置，并且判断是向左滑动还是向右滑动。
4. 最后调用move函数来切换图片，通过动态计算sliderUl的left值来实现移动效果。
5. 在move函数中，计算left值需要用到currentIndex，而currentIndex的值在向左或向右滑动时已经被修改了，因此需要传入参数index来表示要切换到的图片索引值。