JavaScript-based Marketplace-Implementation of image ad carousel instance code _ javascript skills

When you go shopping mall, I wonder if you have noticed that there will be various carousel advertisements on the homepage of the mall, which has very good results, I would like to share with you the following small series for you to learn how to go shopping mall. I wonder if I have noticed that there will be various carousel advertisements on the homepage of the mall. The results are very good, I would like to share with you the following small series. The specific content is as follows:

1. HTML framework

For example, there are three parts: p-bearing, ul-storing pictures, ul-storing numbers, and two buttons.

 
 

  
  

  
  

  
  

  
  

  
  

 
 
 
 

  
  
1
  
  
2
  
  
3
  
  
4
  
  
5
 
 

2. CSS Configuration

First, set the value p in the outer frame to be the same as the image size, and align it in the center. Set the position value to relative positioning, because the following pictures are definitely located relative to the large frame.

// P outer box. out {width: 560px; height: 350px; margin: 0 auto; position: relative; border: 2px solid red ;}

Then set the image. The five images are superimposed and implemented through the absolute attribute, because we set the parent container as relative, therefore, the child elements in the table are absolutely located relative to the parent p.

.img {list-style-type: none;}.img li{position: absolute;top:0;cursor: pointer;}

I will write other elements to the Code with comments.

. Num {list-style-type: none;/* This attribute will invalidate text-align, so you can manually write the width below */position: absolute; width: 100%; bottom: 0; text-align: center ;}. num li {width: 20px; height: 20px;/* The Row height attribute center the element vertically */line-height: 20px; text-align: center; /* inline-block: arrange all elements in rows */display: inline-block; background-color: # 4a4a4a; color: # fff; border-radius: 50%; /* put the mouse on a small hand */cursor: pointer;}/* put the mouse on the picture to display btn */. out: hover. btn {display: block ;}. btn {width: 30px; height: 50px; position: absolute; display: none;/* use top and margin to locate the property to the vertical center */top: 50%; margin-top: -30px; border: 0;/* use rgba to modify the transparency */background-color: rgba (, 0 ,. 5); color: # fff ;}. right {right: 0 ;}

The effect is as follows:

3. jquery controls carousel

Manual carousel

That is, move the cursor to the following number to display the corresponding image.

// Manually control the carousel image $ (". img li "). eq (0 ). fadeIn (300); // display the first image $ (". num li "). eq (0 ). addClass ("active"); // Add a red background $ (". num li "). mouseover (function () {// The current number shows the red background. Other numbers hide the background $ (this ). addClass ("active "). siblings (). removeClass ("active"); // display the image corresponding to the current number. Other images hide var index =$ (this ). index (); $ (". img li "). eq (index ). stop (). fadeIn (300 ). siblings (). stop (). fadeOut (300 );})

Automatic carousel

// Implement automatic carousel var I = 0; // The timer controls the number var t = setInterval (move, 1500); // This method displays the image function move () corresponding to the serial number () {if (++ I = 5) {I = 0 ;}$ (". num li "). eq (I ). addClass ("active "). siblings (). removeClass ("active"); $ (". img li "). eq (I ). stop (). fadeIn (300 ). siblings (). stop (). fadeOut (300);} // stop automatic carousel after moving the mouse in $ (". out "). hover (function () {clearInterval (t) ;}, function () {t = setInterval (move, 1500 );});

Achieve click carousel

// Button movement event $ (". right "). click (function () {move () ;}); $ (". left "). click (function () {I = I-2; move ();});

Dynamically control the number of li numbers displayed

Use the image quantity to control the number of tags.

// Manually control the number of li var size = $ (". img li "). size (); for (var k = 1; k <= size; k ++) {$ (". num "). append ("
"+ K +"
") ;}$ (". Num li "). eq (0). addClass (" active ");