jquery for Carousel effect (i)-basics

Foreplay:

xxxx xx month XX Day, the manager gave me a site news information web development work. I am a Java program ape, how finished web design such a high-end job!

Even though you have learned a little bit of HTML before. Knowledge of CSS. But in the actual use, the page is very difficult to look good, and finally the confidence has not, and do not want to do the web development of the matter. Learn Java with all your heart. Assume that in small companies 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 easy, either with some front-end frame, or the past project to copy and then change the next page). Get the Web development job. I suddenly Leng, just fortunately do not need me to design the page. Just to get the template to do a good job, and then make the layout is OK. Just write code of course I can't live as a program Ape!

So Phala Phala to write the code. Suddenly found. Hey. What the hell is this? The next news image is displayed every once in a while. Asked the artist, he said this is a call " Carousel " East, just think this thing is wonderful, the artist said you go online to do the Carousel effect code, and then change can ~ Baidu a bit, found that the results of the search is particularly large, and most of them are written in jquery, So casually find an effect to use the past, the effect is really pleasant.

It really solves the problem, but I'm tired of copying and pasting without brains, and it's not a way of doing it, I don't just have to know that he can really do it, but also how it works (as I see it). Some of the company's programs some of the ape's code is copied and pasted over. You go to see some of the code inside will think very messy, sometimes the code problem, you ask him, he unexpectedly did not know! Of course I'm not here for the black guys. However, copying the code does not have any effect on the improvement of our technology. Therefore, according to some of his own understanding, provided this jquery carousel effect of the commentary. Suppose there is any omission in the text. Also hope that the generous enlighten.

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 carousel display (left, right button, index button (such as the top number button above)), and rotates the carousel image every once in a while.

2. The display of the Carousel graph: The Carousel graph to display. There is no need to show the carousel image to hide; These carousel images are usually positioned together to display one carousel at a time.
3. Control button: Displays a carousel graph of the corresponding index position when the mouse clicks or moves over the index button. 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 a total of 2 states of activation state and inactive state; When you move the mouse over the carousel, you should stop your active rotation and start your own active rotation when you leave the mouse.

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") The index button that is currently active is selected.
2. The toggle display of the two carousel graphs is implemented using jquery's fadeout () and Fadein () methods, with detailed use of the jquery API.
3. CSS Transparent Background implementation: Background:rgba (0, 0, 0, 0.2); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr=# 33000000,endcolorstr= #33000000); (Be able to take a look at the following information), compatible with most mainstream browsers include IE. Why not use opacity? Because opacity makes text transparent (child elements are also transparent).
4. HTML skeleton is very important, you should write the results of the HTML 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 already 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, backward turn button$ ('. Slider-page ') ). Hide ();//hover on the mouse to display the forward, backward button, stop sliding. Hide the forward and backward button when the mouse leaves. 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, start page of paging * Currentindex integer. Turn to the page */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;} Start Carousel Start ();});

The first is the initialization part: Hide the pictures that were unexpected except for the first carousel, and hide the forward and backward buttons. Causes the first index button to be in the active state.

Event part: The hover () of jquery binds the hover of the mouse and the event handling when it leaves. The bind () method of jquery binds the mouse click event handling forward, backward,

Carousel Control: Pre (), next (), Play (), start () start their own active carousel, stop () stop their own active carousel.

The above JS write more scattered, the structure is not very good, reading is also more laborious. is not easy to use. High coupling degree. The next article will give a pure jquery Carousel plugin that can customize various effects. Easy to configure and extensible.

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

The following is the overall code:

Index.html

<! DOCTYPE html>
At this point a simple jquery carousel effect is complete. There is, of course, a lot of room for improvement.
The source code for 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)
 
  
 
 
References:
 
 

  
  
 
   
Compatible with RGBA under IE8 (Transparent effect)
 
   
jquery Official API
 
   
CSS3 Opacity Properties
 
  
 
 
 
jquery for Carousel effect (i)-basics