Using jQuery to create a basic Web image carousel effect _ jquery

This article describes how to use jQuery to create a basic Web image carousel effect. When you hover your mouse over it, you can stop it and leave it for automatic carousel, this article also introduces a method to implement the zslider plug-in, which is sharp. If you need it, you can refer to the following:

That's what it means. No animation is captured ~

Carousel Effect Analysis:
The carousel effect can be roughly divided into three parts: carousel images (images or containers included), which control the buttons displayed in the carousel images (left and right buttons, the Index button (such as the number button at the top of the top) displays carousel images at intervals of time.
Slideshow image display: the slideshow image to be displayed is displayed. the slideshow images that do not need to be displayed are hidden. These carousel images are usually located together and each time a slideshow image is displayed.
Control button: When you click or move the mouse over the Index button, the carousel chart corresponding to the index position is displayed. the up and down buttons control the display of the previous and next carousel images.
Others: Generally, there are two statuses of the Index button: Activation and inactive. When you move the mouse over the carousel image, automatic carousel should be stopped. When the mouse leaves, automatic carousel starts.

Notes on carousel effect implementation:
Jquery provides a variety of selectors and methods for selecting elements, which greatly simplifies our development, such as $ (". slider-item "). filter (". slider-item-selected ") Select the currently active Index button.
The switching display effect of the two carousel images is achieved through the fadeOut () and fadeIn () Methods of jquery. For details, refer to the jquery api;
Implementation of CSS transparent background: rgba (0, 0, 0, 0.2); filter: progid: DXImageTransform. microsoft. gradient (startColorstr = #33000000, endColorstr = #33000000); (see the following documents). compatible with most mainstream browsers, including IE. Why not use opacity? Because opacity will make the text transparent (sub-elements will also be transparent ).
The HTML skeleton is very important. The html result you wrote should be good.

Code Section:

HTML:

 
 
  
  
  
   
   
1
  
   
   
2
  
   
   
3
  
   
   
4
 
  
  
 
  <  > 
 
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 carousel t = 3000 has been started; // The carousel interval length = $ ('. slider-panel '). length; // hide the first image except $ ('. slider-panel: not (: first )'). hide (); // set the first slider-item to the activation status $ ('. slider-item: first '). addClass ('slider-item-selected'); // hide the forward and backward buttons $ ('. slider-page '). hide (); // when the cursor is over, the forward and backward buttons are displayed. Stop sliding. When the mouse leaves, hide the forward and backward buttons and start to slide $ ('. slider-panel ,. slider-p Re ,. 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 (); play (preIndex, currentIndex) ;}, function () {start () ;}); $ ('. slider-pre '). unbind ('click'); $ ('. slider-pre '). bind ('click ', Function () {pre () ;}); $ ('. slider-next '). unbind ('click'); $ ('. slider-next '). bind ('click', function () {next () ;});/*** flip forward */function pre () {var preIndex = currentIndex; currentIndex = (-- currentIndex + length) % length; play (preIndex, currentIndex);}/*** flip back */function next () {var preIndex = currentIndex; currentIndex = ++ currentIndex % length; play (preIndex, currentIndex );}/*** From the preIndex page to the currentIndex page * preIndex integer, the page turning start page * currentIndex integer, the page turning to */function play (preIndex, currentIndex) {$ ('. slider-panel '). eq (preIndex ). fadeOut (1, 500 ). parent (). children (). eq (currentIndex ). fadeIn (1000); $ ('. 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 of carousel start ();});
First, the initialization part: hides all images except the First carousel image, and hides the forward and backward buttons to make the first Index button active.
Event section: handle events when you move the cursor over and when you leave jquery's hover () method, bind the cursor to the jquery bind () method, and click the event to process forward and backward,
Carousel control: pre (), next (), play (), start () start automatic carousel, stop () stop automatic carousel.
The above js writes are scattered, the structure is not very good, it is also laborious to read, it is not easy to use, and the coupling degree is high. Next, we will provide a pure jquery carousel plug-in that Can Customize various effects and facilitate configuration and scalability.
The following is the overall code:
Index.html
  Jquery carousel-by RiccioZhang