jquery realizes the picture carousel effect (Imitation QQ Mall homepage, Tmall homepage)

Image Carousel is a common feature in Web sites that allows you to display a set of product images or photos in a limited web space, as well as a very appealing animation effect. Believe that a lot of students in various types of Web sites have seen a variety of the carousel effect diagram, many students also want to try to do a self-made, but the online code is full of flaws, can not be used, here I will give you two ways to introduce the picture of the carousel for your reference.

achieve a

QQ Mall Carousel Effect Diagram

Sky Cat Mall Carousel Effect Diagram

1. Production interface

<div class= "wrapper" >
	
 

Here we focus on the ID of the focus Div, where we put the &LT;UL&GT;&LT;LI&GT;&LT;/LI&GT;&LT;/UL&GT, first of all we have to do is to put all the carousel pictures in, followed by its operation.

1.1 Unified set a style


* {
	margin:0; 
	padding:0;
}
body {
	font-size:12px;
	Color: #222; 
	Font-family:verdana,arial,helvetica,sans-serif; 
	Background: #f0f0f0;
	}
Ul,li {
	list-style:none;
}
. wrapper {
	width:800px; 
	margin:0 Auto; 
	padding-bottom:50px;
}
h1 {
	height:50px; 
	line-height:50px; 
	font-size:22px; 
	Font-weight:normal; 
	font-family: "Microsoft Yahei", Simhei;
}
 

1.2 Setting a style for a carousel diagram


#focus {
	height:280px; 
	width:800px;
	Overflow:hidden;
	position:relative;
}
#focus ul {
	position:absolute;
}
#focus ul li {
	float:left; 
	width:800px; 
	height:280px; 
	Background: #000;
}
 

Since the picture of the aspect is 280px, 800px, here we give Div set this high-width should be very good understanding, Overflow:hidden, or understand Li after left floating length has far exceeded the width value of div, need to put the extra part hidden.

1.3 Set the style for the translucent banner below the carousel, which provides the ability to switch pictures manually by moving the mouse


#focus div.btn {
	position:absolute; 
	width:800px; 
	height:10px; 
	padding:5px 10px;
	right:0; 
	bottom:0; 
	Text-align:right;
	Background: #000;
 	opacity:0.5;
	Filter:alpha (opacity=50);
}
#focus div.btn span {
	display:inline-block; 
	width:25px; 
	height:10px; 
	margin-left:5px; 
	Cursor:pointer; 
	Background: #fff;
	border:1px solid #A020F0;
}
DIV.BTN is the lower banner, translucent; div.btn span is a small box.

1.4 Click the arrows in the left and right half of the picture to toggle the effect style of the upper and lower picture




#focus Div.prenext {
	width:45px; 
	height:100px; 
	Position:absolute; 
	top:90px; 
	Background-image:url (.. /img/sprite.png); 
	Background-repeat:no-repeat;
	opacity:0;
	Filter:alpha (opacity=0);
	Cursor:pointer;
}
#focus Div.pre {
	left:0;
	Background-position:left top;
}
#focus Div.next {
	right:0; 
	Background-position:right top;
}
#focus Span.hidden {
	display:block;
	width:400px;
	height:260px;
	Background: #000;
	opacity:0;
	Filter:alpha (opacity=0);
	Position:absolute;
	Cursor:pointer;
}
#focus span.left {
	top:0;
	left:0;
}
#focus span.right {
	top:0;
	right:0;
}
 

Span.hidden here Although we define, but just to put the picture into a 2 effect, in fact, we also set it as fully transparent, the interface does not see any effect at all

 

Div.prenext set the arrow to point, and then separated by the image positioning



2. Make animation effect

Because I have the relevant comments in the code, here is no longer redundant, there is no clear place to comment or leave a message. To say more, because the picture carousel effect uses a lot of jquery events, animations, and CSS a little bit deeper knowledge, if you look at this code or laborious students can be appropriate to revisit the foundation.

 
 

$ (function () {var swidth = $ ("#focus"). width ();//Get the focus of the map (display area) var len = $ ("#focus ul li"). length;//Get Focus graph number var ind
	ex = 0;
	
	var Pictimer;
	The following code adds a number button and a translucent bar after the button, and a previous page, next page two buttons var btn = "<div class= ' btn ' >";
	for (var i=0; i < Len; i++) {btn + = "<span></span>";}
	BTN + = "</div>"; BTN + = "<div class= ' prenext pre ' ></div>" + "<div class= ' Prenext Next ' ></div>" + "<span class= '
	Hidden left ' ></span> ' + ' <span class= ' hidden right ' ></span> ';
	
	
	$ ("#focus"). Append (BTN); Add a mouse slide event for the small button to display the corresponding contents $ ("#focus div.btn span"). CSS ("opacity", 0.4). MouseEnter (function () {index = $ ("#focus div.btn s
		Pan "). index (this);
	Showpics (index);
	
	});
	Picture mouse across $ (' #focus span.left '). Hover (function () {$ (' #focus div.pre '). Animate ({opacity: ' 0.5 '},500);
	},function () {$ (' #focus div.pre '). Animate ({opacity: ' 0 '},500);
	});
	$ (' #focus span.right '). Hover (function () {$ (' #focus div.next '). Animate ({opacity: ' 0.5 '},500);
},function () {		$ (' #focus div.next '). Animate ({opacity: ' 0 '},500);
	
	});
		Prev Button $ ("#focus span.left"). Click (function () {if (index = =-1) {index = len-1;}
		Showpics (index);
	index--;
	});
			Next Page button $ ("#focus span.right"). Click (function () {if (index = = len) {index = 0;
		Showfirstpic ();
		}else{showpics (index);
	} index + +;

	});
	
	This example is scrolling left and right, that is, all LI elements are floating on the same row, so it is necessary to calculate the width of the perimeter ul element ("#focus ul"). CSS ("width", swidth * (len+1));
	Stops AutoPlay when the mouse is on the focus chart, and starts to automatically play $ ("#focus") when it is slid out. Hover (function () {clearinterval (Pictimer); },function () {Pictimer = SetInterval (function () {if (index = = len) {////If the index value is equal to the number of Li elements, the last picture is finished, the next one is to display the first graph, which is called SHOWF
				Irpic (), and then clear the index value 0 index = 0;
			Showfirstpic ();
			} else {//If the index value is not equal to the number of LI elements, switch to normal state and call Showpics () showpics (index);
		} index++; },2000);
	
	This 2000 represents the interval of AutoPlay, in milliseconds}); Displays the picture function, displays the corresponding content according to the received index value function showpics (index) {//general switching var nowleft =-index*swidth;//The left value of the UL element is calculated according to the index value $ (" #focus ul "). Stop (True,false). Animate ({" Left ": Nowleft},500); Adjust the UL element by Animate () to the calculated position $ ("#focus div.btn span"). Animate ({"opacity": "0.4"},300). EQ (index). Animate ({" Opacity ":" 1 "},100); Switches the current button to the selected effect} function Showfirstpic () {///last graph automatically switches to the first graph when dedicated $ ("#focus ul"). Append ($ ("#focus ul Li:first"). Clone () );//To move the effect from the rightmost to the leftmost or left, instead of moving to the right var nowleft =-len*swidth; The left value of the UL element is calculated by the number of Li elements, which is the right side of the last Li Element ("#focus ul"). Stop (True,false). Animate ({"Left": Nowleft},500,function () {//
			By callback, the UL element is relocated to the starting point after the animation is finished, and then the last copy of the previous element is deleted $ ("#focus ul"). CSS ("left", "0");
		$ ("#focus ul li:last"). Remove (); 
		}); $ ("#focus div.btn span"). Animate ({"opacity": "0.4"},300). EQ (index). Animate ({"Opacity": "1"},100); Switch to the selected effect for the current button});
 

Tmall Picture Carousel Effect

 

The main code is the same, mainly the interface is no longer a picture occupies the entire plate, but divided into several pieces, and the mouse moved to the relevant small picture block, the color will be lightened.

Code Download Address

 
implementation twoYou can set the carousel for horizontal vertical scrolling

Page code
<! DOCTYPE html> 
Page here we only define a div in the periphery, where span is used for the translucent banner below the carousel, and strong is used to display the picture text description

 

CSS Code
* {
	margin:0; 
	padding:0;
}
Ul,li {
	list-style:none;
}
#banner {
	width:750px;
	height:280px;
	margin:50px Auto;
	position:relative;
	Overflow:hidden;
}
#banner img {
	display:block;
	Position:absolute;
	top:0;
	left:0;
	Z-index:1
}
#banner ul {
	position:absolute;
	bottom:0px;
	right:50px;
	Z-index:4;
}
#banner ul li {
	float:left;
	padding:0 5px;
	font-size:16px;
	Color: #999;
	Cursor:pointer;
}
#banner span {
	width:750px;
	height:25px;
	Position:absolute;
	top:255px;
	left:0;
	Background: #333;
	opacity:0.3;
	Filter:alpha (opacity=30);
	Z-index:3;
}
#banner Strong {
	position:absolute;
	top:260px;
	left:10px;
	Color: #fff;
	Z-index:4;
}
We give the IMG definition of the style are stacked in a position top:0, left:0, and then when the carousel to let it swipe up or down, notice the banner Overflow:hidden; property of this style of the classmate certainly its intention is to hide overflow, can not see the banner outside the sliding picture.

One more point here, we have defined a relative positioning for the banner Div, so the positioning of our other elements is in absolute terms relative to banner.

JS Control Code
$ (function () {//carousel initialization var len = $ ("#banner img"). length;
		var ul = "<ul>";
		for (var i=0; i < Len; i++) {ul + = "<li> </li>";}
		UL + = "</ul>";
		$ (UL). AppendTo ($ ("#banner"));
		$ (' #banner img '). CSS ("opacity", 0). CSS ("filter", ' alpha (opacity= ' + (0*100) + ') ');
		$ (' #banner img '). EQ (0). CSS ("opacity", 1). CSS ("filter", ' alpha (opacity= ' + (1*100) + ') ');
		$ (' #banner ul li '). EQ (0). css (' color ', ' #333 ');
		
		$ (' #banner strong '). HTML ($ (' #banner img '). EQ (0). attr (' Alt '));
		Carousel counter var banner_index = 0; 		Type of the carousel var banner_type = 2;
		1 means left and right, 2 means scroll up/down/auto-carousel var banner_timer = setinterval (BANNER_FN, 4000);
			Manual Carousel $ (' #banner ul Li '). Hover (function () {clearinterval (Banner_timer); if ($ (this). CSS (' color ')! = ' rgb (Wuyi, Wuyi, Wuyi) ' && $ (this). CSS (' color ')! = ' #333 ') {banner (this, Banner_index = = 0?
			$ (' #banner ul Li '). Size ()-1:banner_index-1);
			}}, function () {Banner_index = $ (this). Index () + 1; Banner_timer = SetInTerval (BANNER_FN, 3000);
		});
			function banner (obj, prev) {$ (' #banner ul Li '). css (' color ', ' #999 ');
			$ (obj). css (' color ', ' #333 ');
			
			$ (' #banner strong '). HTML ($ (' #banner img '). EQ ($ (obj). index ()). attr (' Alt ')); if (Banner_type = = 1) {$ (' #banner img '). EQ (prev). Animate ({opacity: ' 0 ', left: " -900px"},1500). css
				
				(' Z-index ', 1);
			$ (' #banner img '). EQ ($ (obj). index ()). Animate ({opacity: ' 1 ', left: "0"},1500). CSS (' Z-index ', 2); } else if (Banner_type = = 2) {$ (' #banner img '). EQ (prev). Animate ({opacity: ' 0 ', top: ' 150px '}
				
				). CSS (' Z-index ', 1);
			$ (' #banner img '). EQ ($ (obj). index ()). Animate ({opacity: ' 1 ', Top: ' 0 '},1500). css (' Z-index ', 2);
			}} function Banner_fn () {if (Banner_index >= $ (' #banner ul Li '). Size ()) Banner_index = 0; Banner ($ (' #banner ul li '). EQ (banner_index), Banner_index = = 0? $ (' #banner ul Li '). Size ()-1:banner_ind
EX-1);			banner_index++; }
		
});
 

This code in fact we should mainly look at the banner method, its two parameters are the current Picture object, the previous picture object, and manipulate its positioning and transparency until disappeared.

Summary: About the picture carousel, I believe that its implementation is certainly not more than the above two, but a little, regardless of the way you need a certain CSS skills, as well as skilled JS application capabilities.