JQuery制作图片滚动选择栏

今天因为我做网站需要，我采用JQuery开发了一个类似功能的图片滚动选择的插件。演示地址, 代码下载。

首先需要下载JQuery程序。这个网上直接搜，我就不提供链接了。

接着编写如下HTML代码：

<div class="sidebar">
        <img src="Images/up.gif" alt="" class="slide-img" id="up-img" />
        <div class="img-container">
            <div class="small-image">
                <a href="#" ><img class="thumb" src="images/girl.jpg" alt="" /></a>
            </div>
             <div class="small-image">
                <a href="#" ><img class="thumb" src="images/girl.jpg" alt="" /></a>
            </div>   
            <div class="small-image">
                <a href="#" ><img class="thumb" src="images/girl.jpg" alt="" /></a>
            </div>
             <div class="small-image">
                <a href="#" ><img class="thumb" src="images/girl.jpg" alt="" /></a>
            </div>           
        </div>
        <img src="Images/down.gif" alt=""  class="slide-img"  id="down-img" />
    </div>

将每一个图片放在一个div中，并给这些div添加一个类small-image, 然后将所有small-image的div放在一个大的sidebar中，表示边栏。

Css的编写如下：

.sidebar {
    width: 150px;
    float: left;
    height: 360px;
    background: #a2a3a4;
}
.sidebar .slide-img {
    padding: 5px 6px;
    width: 120px;
    height: 20px;
    cursor:pointer;
}
.sidebar .img-container {
    margin-bottom: 10px;
    padding: 5px 6px;
    margin: 0 auto;
    overflow: hidden;
    height: 285px;
    position: relative;
}
.sidebar .small-image {
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
    height: 145px;
    width: 135px;
    position: relative;
}
.sidebar .small-image img.thumb {
    padding: 4px;
    border: 1px solid gray;
    width: 110px;
    height: 110px;
}

需要注意的是，在img-container中，overflow是为hidden的，以便内容超出边界时隐藏。同时在img-container和small-image这二个类中都有position: relative;以保证位置的正确性，当去掉这句时会在IE下显示出问题。

因为有强大的JQuery库作为后盾，编写javascript就显得简单了。

$(document).ready(function(){
            var offset = 145;   //每次滚动的高度
            var imageNum = 4;   //图片数
            var distance = 0;   //滑动距离
 
            $("#up-img").click(function () {
                if(distance < 0) {
                   distance += offset;
                   $(".img-container .small-image").animate({top: distance}, 500);             
                 }
            });
            
             $("#down-img").click(function () {
                if(distance + (offset * (imageNum - 2)) > 0) {  //减二是因为同时显示的图片数为2
                    distance -= offset;
                    $(".img-container .small-image").animate({top: distance}, 500);
                }
            });           
         });

首先是$(document).ready，以保证在整个文档记载完成后再操作。接着定义每次滚动的高度，图片的总张数这些常量。distance表示目前滚动的距离。当向上按钮点击时，我们需要对图片进行向下滚动，则显示区域的top增加。当向下按钮点击时，我们需要对图片进行向上滚动，则显示区域的top减小。这些直接通过JQuery中强大的animate函数来实现。注意的就是边界前景的判断。

演示地址, 代码下载

很简单吧？动手试试吧~