jquery轮播图自动

实现jquery轮播图自动切换可以使用setInterval函数来实现定时切换图片。具体实现步骤如下：

1. 设置一个变量index表示当前显示的图片序号，初始值为0
2. 使用定时器setInterval函数，每隔一段时间切换一张图片。在定时器中，将当前显示的图片隐藏，index加1，如果index超过了图片总数，则将index重置为0，显示下一张图片。
3. 给轮播图添加鼠标移入移出事件，当鼠标移入时，清除定时器，停止自动切换；当鼠标移出时，重新启动定时器，继续自动切换。

以下是一个简单的示例代码：

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;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slider ul li {
  float: left;
  width: 20%;
  height: 100%;
}

.slider ul li img {
  width: 100%;
  height: 100%;
}

.slider .prev,
.slider .next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 30px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.slider .prev {
  left: 10px;
}

.slider .next {
  right: 10px;
}

JavaScript代码：

$(function() {
  var index = 0; // 当前显示的图片序号
  var timer = null; // 定时器变量
  var $slider = $('.slider');
  var $ul = $slider.find('ul');
  var $li = $ul.find('li');
  var len = $li.length;
  var width = $slider.width();
  var $prev = $('<div class="prev">&lt;</div>');
  var $next = $('<div class="next">&gt;</div>');

  // 添加上一页、下一页按钮
  $slider.append($prev).append($next);

  // 给上一页、下一页按钮添加事件
  $prev.on('click', function() {
    index--;
    if (index < 0) {
      index = len - 1;
    }
    showImage();
  });

  $next.on('click', function() {
    index++;
    if (index >= len) {
      index = 0;
    }
    showImage();
  });

  // 定时切换图片
  timer = setInterval(function() {
    index++;
    if (index >= len) {
      index = 0;
    }
    showImage();
  }, 3000);

  // 鼠标移入停止自动切换，移出继续自动切换
  $slider.on('mouseenter', function() {
    clearInterval(timer);
  }).on('mouseleave', function() {
    timer = setInterval(function() {
      index++;
      if (index >= len) {
        index = 0;
      }
      showImage();
    }, 3000);
  });

  // 显示当前图片
  function showImage() {
    $ul.animate({
      left: -index * width
    }, 500);
  }
});