jQuery滑动相册展示

预览

关于布局

纵向的缩略图列表没什么麻烦，横向的设置如果绝对定位时IE6不能正常适应，必须设置一个宽度。在这里，直接给一个极大值：

.albumSlider-h .imglist{position: relative;width:999em;}

关于行为

按照以前的做法，移动距离是每张图片的 outHeight() * 间隔。这回发现有点问题，因为背景图片存在，有的图片间距是8像素，有的是6像素。

灵机一现，用偏移值的计算代替每张图片的高度，这样还能自动适应移动的间隔大小：

//用偏移获取每次移动的距离
var offsetType = isVertical ? 'top' : 'left';
var stepDistance = ( size >= cfg.step )
? $('li',$list).eq(cfg.step).offset()[offsetType] - $('li',$list).eq(0).offset()[offsetType]
: 0;

在同时，控制卷动通常的做法是额外定义当前可以的图片数量。但是既然已经定义了移动间隔，我们就可以直接在客户端以间隔为单位来对缩略图列表进行分页：

//当前分页号，本地分页
currPage = 0,
//列表总数，以0为索引
size = $list.children().length - 1,
//页面大小，本地分页，以移动间隔距离为每页大小
pageSize = Math.floor( size / cfg.step );

全部代码如下：

CSS：

/*纵向布局*/
.albumSlider {width:570px;background:#9c2; margin:0 auto; padding:10px; font-size:10px;
position:relative;overflow:hidden;}
.albumSlider .fullview{position:relative; float:left;}
.albumSlider .fullview,
.albumSlider .fullview img {width:450px; height:300px;}
.albumSlider .fullview img {position:absolute; top:0; left:0;}
.albumSlider .slider{width:110px;height:300px;background:#fff;
position:absolute;top:10px;right:10px;}
.albumSlider .imglistwrap{height:268px; overflow:hidden;margin-right:5px; position:relative;}
.albumSlider .imglist{position:relative;}
.albumSlider li{height:62px;margin-top:4px;_margin-top:3px;clear:both;}
.albumSlider li img{width:90px;height:56px; float:right; display:inline;
margin:2px 2px 0 0;border:1px solid #a0cc4d;}
.albumSlider a{width:103px;height:62px;display:block; outline:none;}
.albumSlider li a:hover,
.albumSlider li.current a{background:url(images/album-slider-arrow.png) no-repeat 0 0;}
.albumSlider .button {width: 100px; height:16px;cursor:pointer;margin-left:5px;
background:url(images/album-slider-button.png) no-repeat 50% 100%;}
.albumSlider .movebackward{background-position: 50% 0;}

/*横向布局*/
.albumSlider-h {width:570px;background:#9c2; margin:0 auto; padding:10px; font-size:10px;
position:relative;}
.albumSlider-h .fullview{position:relative;}
.albumSlider-h .fullview,
.albumSlider-h .fullview img {width:570px; height:300px;}
.albumSlider-h .fullview img {position:absolute; top:0; left:0;}
.albumSlider-h .button,
.albumSlider-h .imglistwrap{float:left; display:inline;}
.albumSlider-h .slider{width: auto;height:76px;margin-top:1em;background:#fff;padding-left:3px;}
.albumSlider-h .imglistwrap{height:69px;width:510px;overflow:hidden;position:relative;}.albumSlider-h .imglist{position: relative;width:999em;}.albumSlider-h li{float: left;margin:0 3px;}
.albumSlider-h li img{width:90px;height:56px;margin:9px 0 0 2px;border:1px solid #a0cc4d;}
.albumSlider-h a{width:96px;height:69px;display:block; outline:none;}
.albumSlider-h li a:hover,
.albumSlider-h li.current a{background:url(images/album-slider-arrow-h.png) no-repeat 0 0;}
.albumSlider-h .button {height:76px;width:16px;margin:0 5px;
background:url(images/album-slider-button-h.png) no-repeat 100% 50% ;cursor:pointer;}
.albumSlider-h .movebackward{background-position: 0 50%;}

JS：

/*
* date 2010-3-31
* by ambar
*/
(function($){
$.fn.albumSlider = function(opt){
return this.each(function(){
var cfg = $.extend({
//一次移动几张图片距离
step: 2,
//大图容器
imgContainer: 'div.fullview',
//缩略图列表容器
listContainer: 'ul.imglist',
//触发事件,'click mouseenter'
event: 'mouseover',
//横向为‘h’，纵向为‘v’
direction: 'v'
},opt || {} );

var $fv = $(cfg.imgContainer, this),
$list = $(cfg.listContainer, this),
//当前显示序号
currId = 0,//当前分页号，本地分页
currPage = 0,
//列表总数，以0为索引
size = $list.children().length - 1,
//页面大小，本地分页，以移动间隔距离为每页大小
pageSize = Math.floor( size / cfg.step );var isVertical = cfg.direction == 'v';//用偏移获取每次移动的距离
var offsetType = isVertical ? 'top' : 'left';
var stepDistance = ( size >= cfg.step )
? $('li',$list).eq(cfg.step).offset()[offsetType] - $('li',$list).eq(0).offset()[offsetType]
: 0;
//proxy,显示上下文对象
var display = function(){
var $li = $(this);
if( $li.is('.current') ){
return false;
}
$('img',$fv).fadeOut(800,function(){$(this).remove();});
$('<img>').hide()
.attr('src',$('a',$li).attr('href'))
.appendTo($fv)
.fadeIn(800);
$li.addClass('current').siblings().removeClass('current');
return false;
};

//初始化后激活第一个
$.proxy(display,$('li', $list).eq(0))();

$list
.delegate('li',cfg.event,$.proxy(display))
.bind('moveforward movebackward',function(e){
var isForward = e.type == 'moveforward';

if( isForward ){
currId += cfg.step;
if( currId > size ){
currId = size;
}
if( ++currPage > pageSize ){
currPage = pageSize;
return false;
}
}
else{//movebackward
currId -= cfg.step;
if( currId < 0 ) {
currId = 0;
}
if( --currPage < 0 ){
currPage = 0;
return false;
}
};

var d  = (isForward ?'-=':'+=' ) + stepDistance;

$(this).stop(true,true).animate(
isVertical ? { top : d } : { left : d }
,500
,function(){
$.proxy(display,$('li', $list).eq(currId))();
});
});

$('div.button',this).click(function(){
$list.trigger($(this).is('.moveforward') ? 'moveforward' : 'movebackward');
});
});
};
})(jQuery);

用法：

$(function () {
//纵向，默认，移动间隔2
$('div.albumSlider').albumSlider();
//横向设置
//$('div.albumSlider-h').albumSlider({direction:'h',step:4});
});

下载：

地址：/Files/ambar/demos/albumSlider/albumSliderV1.2.7z

预览：/Files/ambar/demos/albumSlider/demo.htm