jquery 上下翻动

在网页设计中，经常会用到上下翻动的效果，比如图片轮播、新闻滚动等。而 jQuery 是一种流行的 JavaScript 库，可以方便地实现这些效果。下面介绍一下如何使用 jQuery 来实现上下翻动的效果。

// HTML 代码
<ul id="slide">
  <li>第一条新闻内容</li>
  <li>第二条新闻内容</li>
  <li>第三条新闻内容</li>
  <li>第四条新闻内容</li>
</ul>

// CSS 代码
#slide {
  height: 200px;
  overflow: hidden;
}
#slide li {
  height: 50px;
  line-height: 50px;
}

// JavaScript 代码
var index = 0;
var timer = null;
var delay = 3000; // 延迟时间，单位毫秒

$(function() {
  startSlide();
  $('#slide').hover(function() {
    clearInterval(timer);
  }, function() {
    startSlide();
  });
});

function startSlide() {
  timer = setInterval(function() {
    index++;
    if (index >= $('#slide li').length) {
      index = 0;
    }
    $('#slide').stop().animate({
      marginTop: -50 * index
    }, 500);
  }, delay);
}

首先需要设置一个容器，比如使用 <ul> 标签来包含需要翻动的内容。CSS 中将容器的高度设置为固定值，并将 overflow 属性设置为 hidden，这样就可以将内容隐藏起来。JavaScript 中定义了一个变量 index，用于记录当前显示的内容的索引值，以及一个变量 timer，用于存储定时器的句柄，以便后面可以清除定时器。

startSlide 函数是实现翻动效果的核心代码。首先使用 setInterval 函数设置定时器，定时器会每隔 delay 毫秒调用一次函数。在函数中 index 变量自增一，然后判断 index 是否超出了容器中内容的个数，如果超出了，就将 index 变量重置为 0。接着使用 jQuery 的 animate 函数来实现上下滚动的效果，将容器的 marginTop 属性设置为 -50 * index，这样就能显示出下一个内容了。

最后，在页面加载完成后调用 startSlide 函数，并使用 jQuery 的 hover 函数来处理鼠标悬停的事件，当鼠标悬停时清除定时器，当鼠标离开时重新启动定时器，实现了一个简单的上下翻动效果。