JavaScript Imitation Mall to achieve picture Ads Carousel Instance Code _javascript skills

Everyone in shopping mall when do not know if there is no attention to the mall on the top of the home will have a variety of rounds of advertising, the effect is very good, the following small series for everyone to share here to learn. The details are as follows:

1.HTML Frame

The following figure, divided into three parts, first has a div bearer, and then a UL storage picture, a UL storage number, and then two button can

<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 frame div to set and picture size consistent, and center alignment, position set to relative positioning, because the back of the picture and everything is relative to this big box to absolutely position

div outer box
. out{
width:560px;
height:350px;
margin:0 Auto;
position:relative;
border:2px solid red;

Then set the picture, five pictures superimposed this by absolute this attribute to achieve, because the above we set the parent container to relative, so the child elements inside are relative to the parent div to absolutely locate the

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

The rest of the next element I'll write in the code with a note

. num{
List-style-type:none;
/* This property will make text-align invalid, so the following manual write width can be * * *
position:absolute;
width:100%;
bottom:0;
Text-align:center
}
. Num li{
width:20px;
height:20px;
/* Line height This property causes the element to be vertically centered * *
line-height:20px;
Text-align:center;
/*inline-block enables all elements to be arranged in rows
/display:inline-block;
Background-color: #4a4a4a;
Color: #fff;
border-radius:50%;
* * Mouse put up will have small hands
/Cursor:pointer
;
} * * Mouse is placed on the picture to show btn*/
out:hover. btn{
display:block;
btn{
width:30px;
height:50px;
Position:absolute;
Display:none;
/* through top and margin to locate the property to the vertical center/
top:50%;
Margin-top: -30px;
border:0;
* * Use RGBA can modify the transparency * *
Background-color:rgba (0,0,0,.5);
Color: #fff;
right{
right:0;
}

The effect is as follows:

3.jquery Control Wheel Broadcast

Implement manual Carousel

The mouse is moved to the following number, it shows the corresponding picture

Manually control the carousel figure
$ (". IMG li"). EQ (0). FadeIn (300)//When loading the page let the first Picture Show
$ (". Num li"). EQ (0). addclass ("active");// Give the serial number 1 plus a red background
$ (". Num li"). MouseOver (function () {
//The current number shows a red background, and the other numbers hide the background
$ (this). AddClass ("active") . siblings (). Removeclass ("active");
The current number corresponds to the picture shown, other pictures are hidden
var index = $ (this). index ();
$ (". IMG li"). EQ (index). Stop (). FadeIn. Siblings (). Stop (). fadeout (+);
})

Implement Automatic Carousel

Realize automatic carousel
var i = 0;//Timer controls the number
var t = setinterval (move,1500);
This method displays the picture
function Move () {
if (++i ==5) {
i = 0
) corresponding to the ordinal number. $ (". Num li"). EQ (i). addclass ("active"). Siblings (). Removeclass ("active");
$ (". IMG li"). EQ (i). Stop (). FadeIn. Siblings (). Stop (). fadeout (+);
Stop Auto Carousel after mouse move
$ (". Out"). Hover (function () {
clearinterval (t);
}, Function () {
t = setinterval ( move,1500);
};

Implementation Click Carousel

Button Move Event
$ ('. Right '). Click (function () {move
();
});
$ (". Left"). Click (function () {
i = i-2;
Move ();
});

Dynamic control Li number Display number

Control the number of labels through the number of pictures

Manually control Li quantity
var size = $ (". IMG li"). Size ();
for (Var k=1;k<=size;k++) {
$ (". Num"). Append ("<li>" +k+ "</li>");
$ (". Num li"). EQ (0). addclass ("active");