jQuery图片展示

关于

刚刚整理硬盘时发现这个。当初，在网上看到了个GIF，于是动手改成了jQuery版本的。

结构

<div >
        <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 >向后</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