JQuery打造图片滚动选择栏 _Web前端

JQuery制作图片滚动选择栏

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

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

接着编写如下HTML代码：

将每一个图片放在一个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函数来实现。注意的就是边界前景的判断。

演示地址, 代码下载

很简单吧？动手试试吧~