jQuery实现列表自动循环滚动鼠标悬停时停止滚动

下面是详细讲解“jQuery实现列表自动循环滚动鼠标悬停时停止滚动”的完整攻略。

实现列表自动循环滚动

HTML结构

首先，需要在HTML结构中创建列表元素，以下是示例代码：

<div class="slider">
  <ul>
    <li><a href="#"><img src="image-1.jpg" alt=""></a></li>
    <li><a href="#"><img src="image-2.jpg" alt=""></a></li>
    <li><a href="#"><img src="image-3.jpg" alt=""></a></li>
    <li><a href="#"><img src="image-4.jpg" alt=""></a></li>
    <li><a href="#"><img src="image-5.jpg" alt=""></a></li>
  </ul>
</div>

CSS样式

接下来，我们需要为列表元素添加样式，用来控制滚动的效果。以下是示例代码：

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

.slider ul {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 500%;
  margin: 0;
  padding: 0;
  animation: slide 20s linear infinite;
}

.slider li {
  list-style: none;
  float: left;
  height: 100%;
  width: 20%;
}

.slider li a {
  display: block;
  height: 100%;
  width: 100%;
}

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

JavaScript代码

最后，在JavaScript代码中，我们使用jQuery实现对列表元素的自动循环滚动效果。以下是示例代码：

$(function() {
  var slide = $('.slider ul');
  var slideCount = slide.children().length;
  var slideWidth = $('.slider').width();
  var slideHeight = $('.slider').height();
  var sliderUlWidth = slideCount * slideWidth;

  slide.css({ width: sliderUlWidth, marginLeft: - slideWidth });

  slide.children().last().prependTo(slide);

  function moveLeft() {
    slide.animate({
      left: + slideWidth
    }, 200, function() {
      slide.children().last().prependTo(slide);
      slide.css('left', '');
    });
  };

  function moveRight() {
    slide.animate({
      left: - slideWidth
    }, 200, function() {
      slide.children().first().appendTo(slide);
      slide.css('left', '');
    });
  };

  $('.slider-prev').click(function() {
    moveLeft();
  });

  $('.slider-next').click(function() {
    moveRight();
  });

  setInterval(function() {
    moveRight();
  }, 3000);
});

示例说明

以下是两个示例说明：

示例一

假设我们想要在列表滚动过程中停止自动循环滚动。我们可以像下面这样修改JavaScript代码：

var autoScroll;

$('.slider').hover(function() {
  clearInterval(autoScroll);
}, function() {
  autoScroll = setInterval(function() {
    moveRight();
  }, 3000);
});

autoScroll = setInterval(function() {
  moveRight();
}, 3000);

这样，在鼠标移动到列表元素上时，自动循环滚动就会停止。当鼠标离开列表元素时，自动循环滚动就会恢复。

示例二

假设我们想要在滚动时添加一个“立即停止”按钮，用户可以通过点击该按钮来立即停止滚动。我们可以像下面这样修改HTML结构和JavaScript代码：

<button class="btn-stop-scroll">停止滚动</button>

<div class="slider">
  <ul>
    <li><a href="#"><img src="image-1.jpg" alt=""></a></li>
    <li><a href="#"><img src="image-2.jpg" alt=""></a></li>
    <li><a href="#"><img src="image-3.jpg" alt=""></a></li>
    <li><a href="#"><img src="image-4.jpg" alt=""></a></li>
    <li><a href="#"><img src="image-5.jpg" alt=""></a></li>
  </ul>
</div>

var autoScroll;

$('.btn-stop-scroll').click(function() {
  clearInterval(autoScroll);
});

$('.slider').hover(function() {
  clearInterval(autoScroll);
}, function() {
  autoScroll = setInterval(function() {
    moveRight();
  }, 3000);
});

autoScroll = setInterval(function() {
  moveRight();
}, 3000);

这样，在点击“停止滚动”按钮时，自动循环滚动就会立即停止。当鼠标移动到列表元素上时，自动循环滚动就会停止。当鼠标离开列表元素时，自动循环滚动就会恢复。