jquery for Carousel effect (i)

Foreplay:

xxxx xx month XX Day, the manager gave me a website news page development work, I a Java programmer, how to complete the web design such high-end work! Although have learned a little html,css knowledge, but in the actual use, the page is very difficult to look good, the last confidence has not, and do not want to do the web development of the matter, the heart of learning Java. If the small company to do Java Web development, specifically for the background of the development of very few, generally also have to get the front page (PS: Do these front desk is also very simple, either with some front-end frame, or to the previous project copied over and then modify the next page). Get web Development This job, I suddenly Leng, but fortunately not I go to design the page, as long as the art of the template to take over and then make the layout is OK, just write code of course I can't live as a programmer! So Phala Phala to write code, suddenly found, hey, what is this thing? Every once in a while will show the next news picture, asked the next art, he said this is a call " Carousel " East, only think this thing good magic, the artist said you go online to do the Carousel effect code, and then change on the line ~ Baidu a bit, found that the results of the search is particularly many, And most of them are written in jquery, so casually find an effect to use the past, the effect is really satisfactory.

It really solves the problem, but I'm tired of copying and pasting without brains, and it's not a solution, I need to know not only that he can actually achieve this effect, but also how it works (some of the company's programmers ' code is copied and pasted, as I see it. You go to see some of the code inside will feel very messy, sometimes the code problem, you ask him, he actually did not know! Of course I'm not here for the black guys, just copying the code will not have any effect on our technology's ascension. So according to some of their own understanding, provided this jquery carousel effect of the explanation, if there is any omission, but also hope advice.

Body:

First look at the effect:

Carousel Effect Analysis:

1. The carousel effect can be broadly divided into 3 parts: the carousel image (image or container), the button that controls the display of the carousel (the left and right buttons, the index button (for example, the top number button above)), and rotate the carousel image every once in a while.
2. The display of the Carousel graph: The carousel image to be displayed does not need to be displayed for the carousel to be hidden; These carousel images are usually positioned together to display one carousel at a time.
3. Control button: When the mouse clicks or moves to the index button, displays the carousel map for the corresponding index position; the up and down buttons are responsible for controlling the display of the previous and next carousel pictures.
4. Other: The General Index button has an active state and an inactive state of 2 states, the mouse moves to the top of the carousel should stop automatic rotation, the mouse to start automatic rotation when left.

Carousel Effect Implementation Notes:

1. jquery provides a rich selection of selectors and methods for selecting elements, which greatly simplifies our development, such as $ (". Slider-item"). Filter (". slider-item-selected") selects the index button that is currently active.
2. The toggle display effect of two carousel graphs is realized by jquery's fadeout () and Fadein () method, and the specific use of the jquery API is referred to.
3. CSS Transparent Background implementation: Background:rgba (0, 0, 0, 0.2); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr=# 33000000,endcolorstr= #33000000); (see below for information), compatible with most mainstream browsers including IE; why not use opacity? Because opacity makes text transparent (child elements are also transparent).
4. HTML skeleton is very important, the result of HTML you write should be good.

Code section:

-----------------------------------------------------------------------------------

HTML:

<pre name= "code" class= "HTML" ><div class= "slider" ><ul class= "Slider-main" ><li class= " Slider-panel "><a href=" Http://blog.csdn.net/ricciozhang "target=" _blank "></a></li><li class= "Slider-panel" ><a href= " Http://blog.csdn.net/ricciozhang "target=" _blank "></a></li><li class=" Slider-panel "><a href=" http://blog.csdn.net/ Ricciozhang "target=" _blank ">< /a></li><li class= "Slider-panel" ><a href= "Http://blog.csdn.net/ricciozhang" target= "_blank" > </a></li></ul> <div class= "Slider-extra" ><ul class= "Slider-nav" ><li class= "Slider-item" >1</li><li Class= "Slider-item ">2</li><li class=" Slider-item ">3</li><li class=" Slider-item ">4</li> </ul><div class= "Slider-page" ><a class= "Slider-pre" href= "javascript:;;" ><</a><a class= "Slider-next" href= "javascript:;;" >></a></div></div></div>

CSS:

* {padding:0px;margin:0px;} a {text-decoration:none;} UL {list-style:outside none none;}. Slider,. Slider-panel img,. Slider-extra {width:650px;height:413px;}. slider {text-align:center;margin:30px auto;position:relative;}. Slider-panel,. Slider-nav,. Slider-pre,. slider-next {position:absolute;z-index:8;}. Slider-panel {position:absolute;}. Slider-panel img {border:none;}. Slider-extra {position:relative;}. Slider-nav {margin-left: -51px;position:absolute;left:50%;bottom:4px;}. Slider-nav li {background: #3e3e3e; Border-radius:50%;color: #fff; cursor:pointer;margin:0 2px;overflow:hidden; text-align:center;display:inline-block;height:18px;line-height:18px;width:18px;}. Slider-nav. slider-item-selected {background:blue;}. Slider-page A{background:rgba (0, 0, 0, 0.2); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr=# 33000000,endcolorstr= #33000000); color: #fff; text-align:center;display:block;font-family: "SimSun"; font-size:22px ; width:28px;height:62px;line-Height:62px;margin-top: -31px;position:absolute;top:50%;}. Slider-page a:hover {background:rgba (0, 0, 0, 0.4); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #66000000, endcolorstr= #66000000);}. Slider-next {left:100%;margin-left: -28px;}

JavaScript:

$ (document). Ready (function () {var length,currentindex = 0,interval,hasstarted = False,//Whether it has started carousel T = 3000;// The carousel interval length = $ ('. Slider-panel '). length;//will hide the $ ('. Slider-panel:not (: First) ') in addition to the initial picture. Hide ();// Set the first slider-item to the active state $ ('. Slider-item:first '). addclass (' slider-item-selected ');//Hide forward, back-turn button $ ('. Slider-page '). Hide ();//hover on the mouse to display the forward, back turn button, stop the slide, the mouse left to hide the forward, back turn button, start sliding $ ('. Slider-panel,. Slider-pre,. Slider-next '). Hover (function () {Stop (); $ ('. Slider-page '). Show ();}, function () {$ ('. Slider-page '). Hide (); start ();}); $ ('. Slider-item '). Hover (function (e) {stop (); var Preindex = $ (". Slider-item"). Filter (". slider-item-selected"). Index (); currentindex = $ (this). Index ();p Lay (Preindex, Currentindex);}, function () {Start ();}); $ ('. Slider-pre '). Unbind (' click '); $ ('. Slider-pre '). Bind (' click ', function () {pre ();}); $ ('. Slider-next '). Unbind (' click '); $ ('. Slider-next '). Bind (' click ', Function () {next ();}); * * Page forward */function Pre () {var preindex = Currentindex;currentindex = (--currentindex + length)% Length;play (PreinDex, Currentindex);} /** * Back Page */function next () {var preindex = Currentindex;currentindex = ++currentindex% length;play (Preindex, currentInd ex);} /** * from Preindex page to currentindex page * Preindex integer, page start Page * Currentindex integer, turn to the pages */function play (Preindex, Currentindex) {$ ('. Slider-panel '). EQ (preindex). FadeOut (+). Parent (). Children (). EQ (currentindex). FadeIn (+); $ ('. Slider-item '). Removeclass (' slider-item-selected '); $ ('. Slider-item '). EQ (currentindex). addclass (' slider-item-selected ');} /** * Start Carousel */function Start () {if (!hasstarted) {hasstarted = True;interval = SetInterval (Next, t);}} /** * Stop Carousel */function Stop () {clearinterval (interval); hasstarted = false;} Begin carousel Start ();});

The first is the initialization part: Hide the pictures that were unexpected except the first carousel, and hide the forward and backward buttons so that the first index button is active.

Event part: The jquery bind () method binds the mouse click event handling forward, backward, and hover by using the jquery () binding mouse hover and event handling when leaving.

Carousel Control: Pre (), next (), Play (), start () Auto-carousel, Stop () stops auto-carousel.

The above JS write more scattered, the structure is not very good, read it is also more laborious, is not easy to use, high coupling degree. The next article will give a pure jquery carousel plug-in that can be customized to a variety of effects, easy to configure and extensible.

-----------------------------------------------------------------------------------

Here's the whole code:

Index.html

<! DOCTYPE html>
At this point a simple jquery carousel effect is complete, and there are many areas that need improvement.
The source code of this article can be downloaded at the following address:

 
 

  
  
 
   
CSDN Download click here (http://download.csdn.net/detail/qq791967024/8993769)
 
   
GitHub Download Click here (https://github.com/ricciozhang/zslider_simple)
 
  
 
 
Resources:
 
 

  
  
 
   
Compatible with RGBA under IE8 (Transparent effect)
 
   
jquery Official API
 
   
CSS3 Opacity Properties
 
  
 
 
 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
jquery for Carousel effect (i)