Jquery Image Display

ForwardBackward

About

I found this when I just sorted the hard disk. When I first saw a GIF on the internet, I changed it to the jquery version.

Structure

<Div id = "flow">           </ div> <button id = "Forward"> forward </button> <button id = "backward"> backward </button>

Style

<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>

How to do

First, three new arrays are created to save the image object list, the style and serial number of each position:

var $imgList    = [];var styleList   = [];var tmp         = [0..n];

Then, in order to ensure smooth page loading, use the special effect of an animation queue for initialization:

// Queue name var Qn = 'initquene '; var init = function () {$ flow. dequeue (qN);} // create a queue $ flow during initialization. queue (qN, function () {$ imglist [N]. styleanimate (stylelist [N], config. initspeed, init );});});

Here is the most critical step. during initialization, you can fill in the three arrays used for caching in sequence.

Furthermore, in order to make the pictures look better, we should use non-linear distance intervals:

var interval = (Math.pow(zIndex, config.exp) - 1) * ((fw - iw) / 2) / (Math.pow(half, config.exp) - 1);

Finally, when moving an image, you can use a function similar to the following loop Array Function to control the sequence and movement interval of the image:

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

Call

$ (Function () {// For more configuration parameters, see the upper layer of the plug-in $ ('# flow'). imgflow ();});

Download

Jquery. imgflow. js