JavaScript copy mall to implement picture advertising round instance code

When you are shopping in the shopping mall, I wonder if you have noticed that there are all kinds of rotating advertisements on the front page of the mall. The effect is very good. Here is the site for you to sort out and share for you to learn. The specific content is as follows:

1. HTML framework

As shown in the figure below, it is divided into three parts. First, there is an div for bearing, then one ul for storing pictures, one ul for storing numbers, and then two button

<div class="out">
<ul class="img">
<li><img src="img/1.png" alt=""></li>
<li><img src="img/2.png" alt=""></li>
<li><img src="img/3.png" alt=""></li>
<li><img src="img/4.png" alt=""></li>
<li><img src="img/5.png" alt=""></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 of all, the outer frame div should be set to size 1 and center aligned, and position should be set to relative position, because the following images are absolutely positioned relative to this big box. Okay

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

This is done by using the absolute attribute, because above we set the parent container to relative, so all the children are absolutely positioned relative to the parent div

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

The rest of the elements that follow will be written in comments to the code

.num{
list-style-type: none;
/* This property is going to make text-align failure , So let's just write the width manually */
position: absolute;
width: 100%;
bottom:0;
text-align: center;
}
.num li{
width: 20px;
height: 20px;
/* The row height attribute causes the element to be vertically centered */
line-height: 20px;
text-align: center;
/*inline-block Causes all elements to line up */
display: inline-block;
background-color: #4a4a4a;
color: #fff;
border-radius: 50%;
/* The mouse will have small hands on it */
cursor: pointer;
}
/* When the mouse is over the picture 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 You can change the transparency */
background-color: rgba(0,0,0,.5);
color: #fff;
}
.right{
right: 0;
}

The effects are as follows:

3.jquery control wheel seeding

Achieve manual wheel seeding

Move the mouse over the following number, and the corresponding picture will be displayed

// Manual control wheel plot 
$(".img li").eq(0).fadeIn(300);// Load the page with the number three 1 Picture display 
$(".num li").eq(0).addClass("active");// To the number of 1 Plus a red background 
$(".num li").mouseover(function () {
// The current number displays a red background , All other numbers hide the background 
$(this).addClass("active").siblings().removeClass("active");
// The current number corresponds to the picture display , Other images are hidden 
var index = $(this).index();
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
})

Automatic wheel seeding is realized

// Automatic wheel seeding is realized 
var i = 0;// Timer control number 
var t = setInterval(move,1500);
// This method displays the image corresponding to the ordinal number 
function move() {
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 the automatic wheel play after the mouse is moved in 
$(".out").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move,1500);
});

Realize click wheel seeding

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

Dynamic control of li digital display quantity

The number of labels can be controlled by the number of images

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