jquery实现三张图片之间滑动切换展示

可以使用jQuery的animate()方法和CSS的left属性来实现三张图片之间的滑动切换展示。

HTML结构可以这样写：

<div class="slider">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

CSS样式可以这样写：

.slider {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
}

.slider ul {
  position: absolute;
  left: 0;
  width: 1800px;
}

.slider li {
  float: left;
  width: 600px;
  height: 400px;
}

JavaScript代码可以这样写：

$(function() {
  // 获取需要操作的元素
  var slider = $('.slider');
  var sliderList = slider.find('ul');
  var sliderItem = sliderList.find('li');
  var sliderCount = sliderItem.length;
  var sliderWidth = slider.width();

  // 设置ul宽度，使图片可以水平排列
  sliderList.width(sliderCount * sliderWidth);

  // 初始位置
  var currentIndex = 0;

  // 自动播放
  var autoPlay = setInterval(function() {
    currentIndex++;
    if (currentIndex >= sliderCount) {
      currentIndex = 0;
    }
    play(currentIndex);
  }, 3000);

  // 播放函数
  function play(index) {
    sliderList.stop().animate({'left': -index * sliderWidth}, 500);
  }

  // 鼠标悬停停止自动播放
  slider.hover(function() {
    clearInterval(autoPlay);
  }, function() {
    autoPlay = setInterval(function() {
      currentIndex++;
      if (currentIndex >= sliderCount) {
        currentIndex = 0;
      }
      play(currentIndex);
    }, 3000);
  });

  // 绑定左右箭头事件
  $('.prev').click(function() {
    currentIndex--;
    if (currentIndex < 0) {
      currentIndex = sliderCount - 1;
    }
    play(currentIndex);
  });

  $('.next').click(function() {
    currentIndex++;
    if (currentIndex >= sliderCount) {
      currentIndex = 0;
    }
    play(currentIndex);
  });
});

其中，prev和next分别代表向左和向右的箭头按钮，点击按钮可以切换图片。