JavaScript imitation mall to implement image advertising rotation example code_javascript skills

When you are browsing the shopping mall, have you ever noticed that there are various carousel advertisements on the homepage of the mall? The specific content is as follows:

1.HTML framework

As shown below, it is divided into three parts. First there is a div to hold it, then a ul to store pictures, an ul to store numbers, and then two buttons

<div class="out">
<ul class="img">
<li><img src="/static/imghwm/default1.png"  data-src="img/1.png"  class="lazy" alt=""></li>
<li><img src="/static/imghwm/default1.png"  data-src="img/2.png"  class="lazy" alt=""></li>
<li><img src="/static/imghwm/default1.png"  data-src="img/3.png"  class="lazy" alt=""></li>
<li><img src="/static/imghwm/default1.png"  data-src="img/4.png"  class="lazy" alt=""></li>
<li><img src="/static/imghwm/default1.png"  data-src="img/5.png"  class="lazy" 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 be the same size as the picture, and aligned in the center. The position should be set to relative positioning, because the subsequent pictures and other images are absolutely positioned relative to this large frame

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

Then set the pictures. The superposition of five pictures is achieved through the absolute attribute. Because we set the parent container to relative above, the child elements inside are absolutely positioned relative to the parent div

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

I will write the next other elements into the code with comments

.num{
list-style-type: none;
/*这个属性会使得text-align失效,所以下面手动写上宽度即可*/
position: absolute;
width: 100%;
bottom:0;
text-align: center;
}
.num li{
width: 20px;
height: 20px;
/*行高这个属性使得元素垂直居中*/
line-height: 20px;
text-align: center;
/*inline-block使得所有元素按行排列*/
display: inline-block;
background-color: #4a4a4a;
color: #fff;
border-radius: 50%;
/*鼠标放上去会有小手*/
cursor: pointer;
}
/*鼠标放到图片上的时候才显示btn*/
.out:hover .btn{
display: block;
}
.btn{
width: 30px;
height: 50px;
position: absolute;
display: none;
/*通过top和margin来定位属性到垂直居中*/
top: 50%;
margin-top: -30px;
border: 0;
/*使用rgba可以修改透明度*/
background-color: rgba(0,0,0,.5);
color: #fff;
}
.right{
right: 0;
}

The effect is as follows:

3.jquery control carousel

Realize manual carousel

It means that when the mouse is moved to the number below, the corresponding picture will be displayed

//手动控制轮播图
$(".img li").eq(0).fadeIn(300);//加载页面的时候让第一个图片显示
$(".num li").eq(0).addClass("active");//给序号为1的加上红色背景
$(".num li").mouseover(function () {
//当前的数字显示红色背景,其他的数字都隐藏背景
$(this).addClass("active").siblings().removeClass("active");
//当前数字对应的图片显示,其他图片都隐藏
var index = $(this).index();
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
})

Automatic carousel

//实现自动轮播
var i = 0;//计时器控制数字
var t = setInterval(move,1500);
//该方法显示与序号对应的图片
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);
}
//鼠标移入后停止自动轮播
$(".out").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move,1500);
});

Implement click carousel

//按钮移动事件
$(".right").click(function () {
move();
});
$(".left").click(function () {
i = i-2;
move();
});

Dynamic control of li digital display quantity

You can control the number of tags by the number of pictures

//手动控制li数量
var size = $(".img li").size();
for (var k=1;k<=size;k++){
$(".num").append("<li>"+k+"</li>");
}
$(".num li").eq(0).addClass("active");