Carousel images with blurred images and blurred images

Carousel images with blurred images and blurred images
From my front-end blog, welcome to http://hacke2.github.io/

Cause

Another wave of JS exercises by Hao ~ Today I wrote something Baidu loves to play, so I will ask him to play images with a sense of excitement.

Images can have a sense of excitement.

There are two main ideas

Image size and position calculation

My idea is as follows:

Because of first-end switching, I think of encapsulating a loop queue myself

// Encapsulate a circular queue function CircularQueue (arr) {this. arr = arr | [];} // remove the previous one and append it to the last CircularQueue. prototype. shift = function () {var temp = this. arr. shift (); this. arr. push (temp);} // remove the last one and append it to the CircularQueue header. prototype. unshift = function () {var temp = this. arr. pop (); this. arr. unshift (temp);} // Add an element CircularQueue. prototype. add = function (obj) {this. arr. push (obj );}

The size of the initial cache position in an array,

// Initialize the ARR array var queue = new CircularQueue (); for (var I = 0; I <li. length; I ++) {queue. add ({top: parseInt (getStyle (li [I], 'top'), left: parseInt (getStyle (li [I], 'left'), width: parseInt (getStyle (li [I], 'width'), height: parseInt (getStyle (li [I], 'height'), zIndex: getStyle (li [I], 'z-Index ')});}

Then, add the mouseover event to each selected item to switch to slice.

// Bind the event for (var j = 0; j <links. length; j ++) {links [j]. onmouseover = (function (j, len) {return function () {// switch var k = len-1; for (; k> = 0; k --) {links [k]. className = 'dot ';} links [j]. className + = 'dot-active'; // Replace the big image var arr = getMiddleArr (j); updateStyle (arr) ;}} (j, links. length );}

Input a value to obtain a new array centered on the modified array. Because it cannot disrupt the previous array, I used deep clone.

// Deeply clone the Object. prototype. clones = function () {var o ={}; for (var I in this) {o [I] = this [I] ;}return o ;}; Array. prototype. clones = function () {var arr = []; for (var I = 0; I <this. length; I ++) if (typeof this [I]! = 'Object') {arr. push (this [I]);} else {arr. push (this [I]. clones ();} return arr ;};

Buffer Motion

Still use the motion library of the Smart Union community, and finally update the style of the page elements

// Call the Action function to draw the function updateStyle (arr) {for (var I = 0; I <li. length; I ++) {li [I]. style. zIndex = arr [I]. zIndex; startMove (li [I], arr [I]);}

Code

All the code will not be posted on the blog. It is very simple and there is nothing to read. You can check it out on my github.

Click to go to github: AngularJs + BootStarp + fontAwesome to create a personal presentation page

View the complete DEMO

End from http://hacke2.github.io

The carousel Image Code with digits in the lower right can be manually controlled, pointing out where the code can replace the image, height, width, and so on. Thank you very much.

Code for the carousel Effect of five images.
Copy the following code. Change the image width and height to the desired size. Insert the link address and image address.
DIV class = "slider-promo J_Slider J_TWidget" style = "FLOAT: left; OVERFLOW: hidden; WIDTH: Image WIDTH px; HEIGHT: image Height px "data-widget-type =" Slide "data-widget-config =" {'effect ': 'scrolil', 'contentcls': 'lst-main ', 'navcls': 'lst-trigger', 'activetriggercls': 'current'} ">
<Ul class = lst-main>
<Li style = "DISPLAY: block"> <A href = "http: // link address" target = _ blank> </A>
<Li style = "DISPLAY: block"> <A href = "http: // link address" target = _ blank> </A>
<Li style = "DISPLAY: block"> <A href = "http: // link address =" target = _ blank> </A>
<Li style = "DISPLAY: block"> <A href = "http: // link address" target = _ blank> </A>
<Li style = "DISPLAY: block"> <A href = "http: // link address" target = _ blank> </A> </li> </ul> <ul class = lst-trigger>
<Li style = "BACKGROUND: # c00"> 1
<Li class = current>
 
Why does html code play images?

Try switching this image
Switch with 12345 numbers
If you click a number, it will change to another image. If you do not click it, it will change automatically.
The tutorials and source code are provided.


Reference: www.blueidea.com/..20.10895