jquery 上下焦点图

上下焦点图是常见的网站轮播图之一，利用jquery可以实现上下滚动轮播效果。接下来我们来了解一下如何使用jquery实现上下焦点图。

首先，我们需要准备一些css样式:

.slider {
   width:400px;
   height:300px;
   overflow:hidden;
   position:relative;
}
.slider ul {
   list-style:none;
   position:absolute;
   top:0;
   left:0;
   margin:0;
   padding:0;
}
.slider li {
   height:150px;
   line-height:150px;
   text-align:center;
   background-color:#ccc;
}

以上样式定义了焦点图容器的大小、位置、布局以及每张轮播图的样式。

其次，我们需要编写jquery代码:

$(function(){
    var ul = $('.slider ul');
    var liCount = $('.slider ul li').length;
    var liHeight = $('.slider ul li').height();

    ul.height(liCount * liHeight);

    setInterval(function(){
      var firstItem = ul.find("li:first");
      ul.animate({"marginTop" : -liHeight + "px"},1500,function(){
        ul.css({marginTop:0}).find("ul:first").appendTo(ul);
      });
    },5000);
  });

以上代码实现了焦点图的自动播放效果，每次滚动一个li的高度，轮换展示下一张轮播图，直到最后一张后再从头开始自动轮播。

最后，在HTML中嵌入焦点图代码:

  

    
图片1
    
图片2
    
图片3
    
图片4
    
图片5
  

通过以上三个步骤，我们就可以实现一个简单的上下焦点图了。当然，更加丰富多彩的轮播图需要更加复杂的实现方式，但基础的代码实现可以帮助我们更好地理解轮播图的处理逻辑。