Trong bài này mình sẽ giới thiệu một vài cách để tạo một trình diễn ảnh đơn giản (slideshow hoặc carousel). Chỉ với một vài đoạn code ngắn gọn là chúng ta có thể tạo được tác phẩm ưng ý.
1 Chuyển ảnh bằng nút mũi tên
Kiểu slideshow này chúng ta sẽ chuyển ảnh bằng cách nhấp vào mũi tên 2 bên. Code như sau:
.mySlides {display:none; width:100%}
.button-left{left:1%; font-size:20px}
.button-right{right:1%; font-size:20px }
.image-button{border:none;display:inline-block;padding:10px;height:50px;vertical-align:middle;overflow:hidden; color:#fff;background:#000;position:absolute;top:calc(50% - 25px); opacity:0.5;}
.image-button:hover{color:#000;background-color:#ccc;}
.display-container{position:relative}
<h2 class="">Manual Slideshow</h2>
<div class="display-container">
<img class="mySlides" src="https://canxem.com/img/1.jpg">
<img class="mySlides" src="https://canxem.com/img/2.jpg">
<img class="mySlides" src="https://canxem.com/img/3.jpg">
<img class="mySlides" src="https://canxem.com/img/4.jpg">
<button class="image-button button-left" onclick="plusDivs(-1)">❮</button>
<button class="image-button button-right" onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
Manual Slideshow




Trong phần này chú ý nếu đổi tên css mySlides, ta phải đổi luôn tên trong đoạn javascript.
Để tạo kiểu cho nút mũi tên, ta có thể chỉnh sửa trong CSS image-button.
Có thể thêm nhiều hình ảnh hơn bằng cách thêm địa chỉ ảnh trong phần HTML.
2 Tự động đổi ảnh không hiệu ứng
Nếu chúng ta muốn ảnh tự động chuyển đổi theo thứ tự, ta có thể áp dụng cách sau.
.mySlides {display:none; width:100%}
<h2>Automatic Slideshow</h2>
<div>
<img class="mySlides" src="https://canxem.com/img/1.jpg">
<img class="mySlides" src="https://canxem.com/img/2.jpg">
<img class="mySlides" src="https://canxem.com/img/3.jpg">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
Automatic Slideshow



Chú ý: thời gian thay đổi ảnh tính bằng mili giây. Ở đây chúng ta đang set 2000 tương ứng với 2s, bạn có thể thay đổi trong phần javascript.
3 Tự động đổi ảnh có hiệu ứng
Cũng là tự động đổi ảnh nhưng có thêm hiệu ứng mờ dần nhằm tạo sự đẹp mắt cho chuyển động.
.animate-fading{width:100%; animation:fading 10s infinite}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
<div>
<p>Ảnh xuất hiện theo kiểu mờ/rõ dần trong vài giây</p>
<img class="mySlides2 animate-fading" src="https://canxem.com/img/1.jpg">
<img class="mySlides2 animate-fading" src="https://canxem.com/img/2.jpg">
<img class="mySlides2 animate-fading" src="https://canxem.com/img/3.jpg">
<img class="mySlides2 animate-fading" src="https://canxem.com/img/4.jpg">
</div>
<script>
var myIndex = 0;
carousel2();
function carousel2() {
var i;
var x = document.getElementsByClassName("mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel2, 7000);
}
</script>
Ảnh xuất hiện theo kiểu mờ/rõ dần trong vài giây




4 Slideshow Indicators
Chuyển ảnh bằng mũi tên nhưng có thêm các nút tròn hiển thị vị trí ảnh.
<!DOCTYPE html>
<html>
<title>Slideshow - Canxem.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mySlides3 {display:none; width:100%}
.display-container{position:relative}
/*---Css Nút qua lại---*/
.button-left{left:1%; font-size:20px}
.button-right{right:1%; font-size:20px }
.image-button{border:none;display:inline-block;padding:10px;height:50px;vertical-align:middle;overflow:hidden; color:#fff;background:#000;position:absolute;top:calc(50% - 25px); opacity:0.5;}
.image-button:hover{color:#000;background:#ccc;}
/*---Css Chấm tròn---*/
.badge {text-align:center; margin-bottom:16px; font-size:20px;position:absolute;bottom:0;}
.badge-white{color:#000!important;background-color:#fff!important}
.image-badge {display:inline-block;border-radius:50%;height:14px;width:14px; border:1px solid #ccc;}
.image-badge:hover{background:#fff;}
</style>
<body>
<h2 class="">Manual Slideshow</h2>
<div class="display-container">
<img class="mySlides3" src="https://canxem.com/img/1.jpg">
<img class="mySlides3" src="https://canxem.com/img/2.jpg">
<img class="mySlides3" src="https://canxem.com/img/3.jpg">
<button class="image-button button-left" onclick="plusDivs(-1)">❮</button>
<button class="image-button button-right" onclick="plusDivs(1)">❯</button>
<div class="badge" style="width:100%">
<span class="image-badge" onclick="currentDiv(1)"></span>
<span class="image-badge" onclick="currentDiv(2)"></span>
<span class="image-badge" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides3");
var dots = document.getElementsByClassName("image-badge");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" badge-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " badge-white";
}
</script>
</body>
</html>
Manual Slideshow



Xem thêm: CÔNG CỤ SOẠN THẢO HTML VÀ XEM TRƯỚC KẾT QUẢ
blog của bạn nhiều chủ đề quá :v chịu khó cày cuốc vậy @@
KKK cảm ơn bác đã ghé thăm. Tạo cho nhiều chủ đề để có cái mà viết, cơ mà lười quá, động lực đi đâu hết rồi 😀
blog có thu nhập là có động lực liền :v cố lên người anh em :))