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();
	});

下载

jquery.imgFlow.js