Pusat beli-belah tiruan JavaScript untuk melaksanakan penggiliran pengiklanan imej contoh kemahiran code_javascript

Apabila anda melayari pusat beli-belah, pernahkah anda perasan bahawa terdapat pelbagai iklan karusel di laman utama pusat beli-belah tersebut? Kandungan khusus adalah seperti berikut:

1.Rangka kerja HTML

Seperti yang ditunjukkan di bawah, ia dibahagikan kepada tiga bahagian Pertama terdapat div untuk memegangnya, kemudian ul untuk menyimpan gambar, ul untuk menyimpan nombor, dan kemudian dua butang

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

Pertama sekali, div bingkai luar hendaklah ditetapkan kepada saiz yang sama dengan gambar, dan dijajarkan di tengah Kedudukan hendaklah ditetapkan kepada kedudukan relatif, kerana gambar seterusnya dan imej lain benar-benar diposisikan relatif kepada bingkai besar ini

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

Kemudian tetapkan gambar Superposisi lima gambar dicapai melalui atribut mutlak Kerana kami menetapkan bekas induk kepada relatif di atas, elemen anak di dalamnya benar-benar diposisikan relatif kepada div induk

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

Saya akan menulis elemen lain seterusnya ke dalam kod dengan ulasan

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

Kesannya adalah seperti berikut:

3.karusel kawalan jquery

Realisasikan karusel manual

Ini bermakna apabila tetikus dialihkan ke nombor di bawah, gambar yang sepadan akan dipaparkan

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

Karusel automatik

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

Laksanakan karusel klik

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

Kawalan dinamik kuantiti paparan digital li

Anda boleh mengawal bilangan tag dengan bilangan gambar

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