Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk membuat carta karusel javascript
Bagaimana untuk membuat carta karusel javascript
- 王林asal
- 2023-05-09 09:22:061179semak imbas
Bagaimana untuk membuat karusel JavaScript?
Dengan pembangunan pembangunan bahagian hadapan Web, imej karusel telah menjadi salah satu komponen biasa bagi kebanyakan tapak web dan aplikasi. Walau bagaimanapun, saya percaya bahawa ramai rakan yang baru dalam pembangunan bahagian hadapan akan bertanya, bagaimana untuk membuat carta karusel JavaScript?
Artikel ini akan memperkenalkan anda tentang cara menggunakan JavaScript untuk mencipta carta karusel dan membantu anda memahami secara beransur-ansur prinsip asas dan teknologi biasa untuk melaksanakan carta karusel.
1. Prinsip asas imej karusel
Imej karusel, seperti namanya, ialah sekumpulan imej yang boleh dimainkan dalam gelung Ia merealisasikan gelung automatik atau penukaran manual melalui JavaScript. membenarkan pengguna menyemak imbasnya melalui berbilang imej atau kandungan.
Prinsip asas carta karusel dibahagikan kepada dua bahagian: struktur HTML dan logik JavaScript.
Struktur HTML:
Struktur HTML ialah asas carta karusel Strukturnya kira-kira seperti berikut:
<div class="carousel">
<ul class="carousel-list">
<li class="carousel-item"><img src="image1.jpg" alt="image1"></li>
<li class="carousel-item"><img src="image2.jpg" alt="image2"></li>
<li class="carousel-item"><img src="image3.jpg" alt="image3"></li>
<li class="carousel-item"><img src="image4.jpg" alt="image4"></li>
<li class="carousel-item"><img src="image5.jpg" alt="image5"></li>
</ul>
</div>di mana, .carousel ialah bekas karusel. carta, .carousel-list ialah bekas senarai imej dan .carousel-item ialah bekas untuk setiap imej individu.
Logik JavaScript:
Logik JavaScript melaksanakan teras carta karusel, biasanya dengan cara berikut:
1 Dapatkan elemen halaman carta karusel dan gunakan kod JavaScript untuk memilih HTML Elemen .carousel.
var carousel = document.querySelector('.carousel');2. Dapatkan bekas senarai imej dan bekas imej individu,
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');3 Dapatkan lebar imej karusel,
var itemWidth = items[0].offsetWidth;
4 Peranti pemasaan,
var delay = 3000; var interval;
5 Konfigurasikan main balik automatik dan pensuisan manual,
function startCarousel() {
interval = setInterval(function(){
var left = parseInt(list.style.left) + itemWidth;
if(left <= itemWidth - list.offsetWidth) {
list.style.left = "0px";
} else {
list.style.left = left + 'px';
}
}, delay);
}
function stopCarousel() {
clearInterval(interval);
}2. Laksanakan carta karusel ringkas
Kini, kami telah memahami prinsip asas carta karusel. , dan mencapai kesan asas carta karusel melalui kod. Di bawah, kami akan melaksanakan carta karusel ringkas berdasarkan kesan ini.
Struktur HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Carousel</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="carousel">
<ul class="carousel-list">
<li class="carousel-item"><img src="img/1.jpg" alt="1"></li>
<li class="carousel-item"><img src="img/2.jpg" alt="2"></li>
<li class="carousel-item"><img src="img/3.jpg" alt="3"></li>
<li class="carousel-item"><img src="img/4.jpg" alt="4"></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>Kod JavaScript:
var carousel = document.querySelector('.carousel');
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');
var itemWidth = items[0].offsetWidth;
var delay = 3000;
var interval;
// 自动播放
function startCarousel() {
interval = setInterval(function(){
var left = parseInt(list.style.left) + itemWidth;
if(left <= itemWidth - list.offsetWidth) {
list.style.left = "0px";
} else {
list.style.left = left + 'px';
}
}, delay);
}
// 手动切换
function stopCarousel() {
clearInterval(interval);
}
// 启动轮播
startCarousel();Kod CSS:
.carousel {
position: relative;
overflow: hidden;
width: 400px; /* 轮播图容器的宽度 */
height: 300px; /* 轮播图容器的高度 */
}
.carousel-list {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
width: ${(items.length * 100)}%;
}
.carousel-item {
float: left;
width: calc(100% / ${(items.length)});
}
.carousel-item img {
display: block;
width: 100%;
height: auto;
}3. Carta karusel untuk mencapai pelbagai kesan
Melalui contoh di atas, kami telah mempelajari cara membuat carta karusel mudah. Walau bagaimanapun, biasanya imej karusel bukan sahaja mempunyai kesan di atas, kita juga boleh mencapai kesan imej karusel yang lebih praktikal melalui JavaScript.
1. Kesan pelonggaran
Kesan pelonggaran ialah kesan menukar kelajuan setiap gambar daripada cepat kepada perlahan apabila bertukar. Dengan menggunakan JavaScript kita biasanya boleh menulis seperti ini:
function startCarousel() {
interval = setInterval(function(){
var left = parseInt(list.style.left) + itemWidth;
var startTime = Date.now();
var easing = function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
};
var animate = function() {
var time = Date.now() - startTime;
var easingLeft = easing(time, parseInt(list.style.left), -itemWidth, delay);
if(time <= delay) {
list.style.left = easingLeft + 'px';
requestAnimationFrame(animate);
} else {
list.style.left = -itemWidth + 'px';
list.appendChild(items[0]);
}
};
requestAnimationFrame(animate);
}, delay);
}2. Reka letak responsif
Reka bentuk Web responsif adalah akal dalam reka bentuk bahagian hadapan moden untuk membolehkan karusel menyokong skrin yang berbeza saiz, Untuk menyesuaikan diri dengan reka letak web dengan lebih baik, kita perlu membuat pelarasan dan pengoptimuman tambahan.
/* 以vw为基准 */
.carousel {
position: relative;
overflow: hidden;
width: 80vw; /* 轮播图容器的宽度 */
height: calc(40vw); /* 轮播图容器的高度 */
}
/* 以persent为基准 */
.carousel-list {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
width: ${(items.length * 100)}%;
top: 0;
left: 0;
transition: left .3s;
}
.carousel-item {
float: left;
width: calc(100% / ${(items.length)});
height: 100%;
}
/* 调整图片大小 */
.carousel-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Antaranya, unit vw boleh menentukan panjang sebagai peratusan lebar port pandangan, dan karusel akan mengekalkan reka letak responsif tanpa mengira bagaimana saiz skrin berubah.
4. Ringkasan
Setakat ini, kami telah memahami prinsip asas dan kaedah pelaksanaan untuk mencipta karusel melalui JavaScript. Melalui pelarasan dan pengoptimuman, kami boleh melaksanakan lebih banyak komponen karusel dengan gaya dan kesan yang kaya, sekali gus memenuhi keperluan pengguna untuk kandungan dan perkhidmatan web.
Sudah tentu, masih terdapat banyak kesukaran teknikal dan butiran operasi yang perlu dikuasai dalam membuat karusel dengan JavaScript Saya berharap semua orang dapat menguasai kemahiran ini secara beransur-ansur dalam pembangunan sebenar dan terus meningkatkan kebolehan pengaturcaraan mereka.
Atas ialah kandungan terperinci Bagaimana untuk membuat carta karusel javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!