jQuery图片展示
关于
刚刚整理硬盘时发现这个。当初，在网上看到了个GIF，于是动手改成了jQuery版本的。
结构
<div id="flow">
<img src="img/IMG_0000.jpg" alt="" />
<img src="img/IMG_0001.jpg" alt="" />
<img src="img/IMG_0002.jpg" alt="" />
<img src="img/IMG_0003.jpg" alt="" />
<img src="img/IMG_0004.jpg" alt="" />
<img src="img/IMG_0005.jpg" alt="" />
<img src="img/IMG_0004.jpg" alt="" />
<img src="img/IMG_0003.jpg" alt="" />
<img src="img/IMG_0002.jpg" alt="" />
<img src="img/IMG_0001.jpg" alt="" />
</div>
<button id="forward">向前</button><button id="backward">向后</button>
样式
<style type="text/css">
#flow{position:relative; width:700px; height:480px;background:#300;border:1em solid #333;}
#flow img{ position:absolute;width:260px; height:338px; display:none; }
</style>
如何做
首先，新建三个数组，分别用来保存图片对象列表、各个位置的样式、序号：
var $imgList = [];
var styleList = [];
var tmp = [0..n];
然后，为了使页面加载保持流畅，采用一个动画队列的特效来进行初始化：
// 队列名称
var qn = 'initQuene' ;
var init = function() {
$flow.dequeue(qn);
}
// 在初始化时建立队列
$flow.queue(qn, function() {
$imgList[n].styleAnimate(styleList[n], config.initSpeed, init);
});
});
这里是最关键的一步，在初始化过程中，可以把上面提到的三个用于缓存的数组依次填充。
并且，为了让图片排列得更好看，应该用非线性的间隔距离:
var interval = (Math.pow(zIndex, config.exp) - 1) * ((fw - iw) / 2) / (Math.pow(half, config.exp) - 1);
最后在图片的移动时，就可以用类似于下面的循环数组函数来控制图片顺序和移动的间隔：
Array.prototype.loop = function(num) {
var step = Math.abs(isNaN(num) ? 1 : num % this.length);
return num > 0
? this.concat(this.splice(0, step))
: this.splice(-step).concat(this);
};
$.each(tmp.loop(-3), function(i, n) {
$imgList[n].stop().styleAnimate(styleList[i], config.playSpeed);
});
调用
$(function() {
// 更多配置参数见插件最上层
$('#flow').imgFlow();
});
