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

需要注意的是，在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函数来实现。注意的就是边界前景的判断。

演示地址, 代码下载

很简单吧？动手试试吧~