Centre commercial d'imitation JavaScript pour mettre en œuvre un exemple de rotation de publicité d'image, compétences code_javascript

Lorsque vous parcourez le centre commercial, avez-vous déjà remarqué qu'il y a diverses publicités carrousel sur la page d'accueil du centre commercial ? Le contenu spécifique est le suivant :

1.Cadre HTML

Comme indiqué ci-dessous, il est divisé en trois parties. Il y a d'abord un div pour le contenir, puis un ul pour stocker des images, un ul pour stocker des numéros, et enfin deux boutons

<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.Configuration CSS

Tout d'abord, le div du cadre extérieur doit être défini pour avoir la même taille que l'image et aligné au centre. La position doit être définie sur un positionnement relatif, car les images suivantes et les autres images sont positionnées de manière absolue par rapport à. ce grand cadre

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

Ensuite, définissez les images. La superposition de cinq images est obtenue grâce à l'attribut absolu. Parce que nous définissons le conteneur parent sur relatif ci-dessus, les éléments enfants à l'intérieur sont positionnés de manière absolue par rapport au div parent

.

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

J'écrirai les prochains autres éléments dans le code avec des commentaires

.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;
}

L'effet est le suivant :

3.carrousel de contrôle jquery

Réaliser un carrousel manuel

Cela signifie que lorsque la souris est déplacée vers le numéro ci-dessous, l'image correspondante s'affichera

//手动控制轮播图
$(".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);
})

Carrousel automatique

//实现自动轮播
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);
});

Mettre en œuvre le carrousel de clics

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

Contrôle dynamique de la quantité d'affichage numérique Li

Vous pouvez contrôler le nombre de tags par le nombre d'images

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