An image switching effect based on jquery's awesome

Today to introduce you to a jquery-based image switching effect. Fly into the display picture by the blinds. The picture message is also the blinds fade away. For the picture Show, the effect is very good, we look together:

Online preview Source Download

Take a look at the implemented code. Note that there are references to jquery and underscore plugins.

HTML code:

 <Divclass= "Wrap">        <Divclass= "Box Active"style= "Background-image:url (img/1.jpg);">        </Div>        <Divclass= "Box Active"style= "Background-image:url (img/1.jpg);">        </Div>        <Divclass= "Box Active"style= "Background-image:url (img/1.jpg);">        </Div>        <Divclass= "Box Active"style= "Background-image:url (img/1.jpg);">        </Div>        <Divclass= "Box Active"style= "Background-image:url (img/1.jpg);">        </Div></Div>

JS Code:

 varImgarr = [  ' Img/1.jpg ',  ' Img/2.jpg ',  ' Img/3.jpg ',  ' Img/4.jpg ',  ' Img/5.jpg ',  ' Img/6.jpg ',  ' Img/7.jpg ',  ' Img/8.jpg ',  ' Img/9.jpg ',  ' Img/10.jpg ',  ' Img/11.jpg ']; varSpeed = 2; varFirstPass =true; functionGoGoGo () {varTransspeed = FirstPass = = =true? 0: Speed; FirstPass=false; functionmakeactive () {$ ('. Box '). addclass (' Active '). css ({' Background-image ': ' url (' + imgarr[_.random (0, Imgarr.length-1)] + ') '      }); }            $('. Box.active '). Removeclass (' active '); SetTimeout (makeactive, Transspeed* 1000); } setTimeout (GoGoGo,1000); SetInterval (GoGoGo,7000);

An image switching effect based on jquery's awesome