JavaScript marketplace-like image advertisement carousel instance code, javascript image Advertisement

JavaScript marketplace-like image advertisement carousel instance code, javascript image Advertisement

When you are visiting a shopping mall, I wonder if you have noticed that there will be all kinds of carousel advertisements on the homepage of the mall. The effect is very good. The following small series will help you sort them out and share them with you. The specific content is as follows:

1. HTML framework

For example, there are three parts. First, there is a div bearing, then one ul stores the image, one ul stores the numbers, and the other two buttons.

 

<div class="out"><ul class="img"><li></li><li></li><li></li><li></li><li></li></ul><ul class="num"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><input class="left btn" type="button" value="<"><input class="right btn" type="button" value=">"></div>

2. CSS Configuration

First, set the outer box div to be consistent with the image size, and align it in the center. Set the position to relative positioning, because the following pictures are definitely located relative to the large box.

// Div outer frame. 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 div.

.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 ("<li>" + k + "</li>") ;}$ (". num li "). eq (0 ). addClass ("active ");

Articles you may be interested in:

• Example of slideshow image effects implemented by js supporting mobile phone slide Switching
• Native js and jquery achieve image rotation fade-in and fade-out
• Native js and jquery achieve image carousel Special Effects
• JS method for achieving simple image carousel Effect
• Js implementation click the left and right buttons to carousel the image effect instance
• Use fixed box length and width to implement automatic image carousel js Code
• Js Image Automatic carousel code sharing (js image carousel)
• Simple js image rotation code (js image rotation)
• JS Code with left and right arrows for image carousel
• Code for Implementing Image carousel using native javascript
• Js image carousel (5 images)