上下滚动的jQuery图片展示

这个案例是我自己根据《锋利的jQUery》一书中水平滚动的案例改变的，里面的jQUery代码简单，div机构清晰，适合新手学习，只要耐下心来，仔细研究，自己写出一个应该没有问题的。

这个案例我没有用到图片，全部用的颜色。

上下两个箭头是黑色的，点击可移动相关的图片，

下面我简单的介绍下这个案例：

<div class="prev"></div>
<div class="con">
 <div class="con_list">
    <ul>
     <li class="one"></li>
        <li class="two"></li>
        <li class="three"></li>
        <li class="three"></li>
        <li class="one"></li>
        <li class="two"></li>
        <li class="one"></li>
        <li class="two"></li>
        <li class="one"></li>
        <li class="one"></li>
        </ul>
    </div>
</div>
<div class="next"></div>

这个是div结构。

可以看到这个结构很简单的，上面的是向上的按钮，下面的是向下的按钮，中间的就是图片的展示区域。

下面的是css代码：

* {margin:0;padding:0}
.prev,.next {width:100px;height:20px;background:#333;cursor:pointer}
.con {width:100px;height:300px;overflow:hidden;position:relative}
.con_list {position:relative}
.con li {height:100px}
.one {background:#F90}
.two {background:#69C}
.three {background:#633}

 

注意红色的代码，这些属性是关键，overflow：hidden把超出的部分隐藏；

由于jQuery中我用的是animate()方法，该方法必须在设置了position后才可以生效。因为div的position默认的属性是static，固定的，不可以移动。

 

以下是jQuery代码：

$(function() {
     var page = 1;
     var i = 3;
     var conheight = $('.con').height();
     var lilen = $('li').length;
   var len = Math.ceil( lilen / i );
     $('.next').click(function() {
          if( page == len ) {
           $('.con_list').animate({top:0},'slow');
           page = 1;
          }else{
           $('.con_list').animate({top:'-=' + conheight},'slow');
           page++;
          }
          });
     $('.prev').click(function() {
          if( page == 1 ) {
           $('.con_list').animate({top:'-=' + conheight*(len - 1)},'slow');
           page = len;
          }else{
          $('.con_list').animate({top:'+=' + conheight},'slow');
          page--;
          }
          });
     })

可以看的，代码是非常少的，而且，这个代码逻辑性通顺，很容易理解的。

读者可以自己研究，我只想说一点。

上面定义的page变量是作为一个桥梁，通过它来判断相关图片的位置的。

 

 

下面是完整的代码实例，有需要的可以下载：

 

评论

1 楼 ldl_xz 2014-07-11  

http://www.9958.pw/post/jquery_up_and_down 试试这个