Home » Vọc web » Cách tạo slideshow chuyển ảnh

Cách tạo slideshow chuyển ảnh

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)">&#10094;</button>
  <button class="image-button button-right" onclick="plusDivs(1)">&#10095;</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)">&#10094;</button>
  <button class="image-button button-right" onclick="plusDivs(1)">&#10095;</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Ả


Vọc web
, ,

3 Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bài viết liên quan

Soạn thảo và xem trước HTML
Công cụ soạn thảo HTML và xem trước kết quả
Bộ công cụ soạn thảo HTML và xem trước kết quả (HTML editor), có khả năng xem kết quả tức thời trong khi nhập mã. Mã nguồn Kết quả Công cụ tiện…
Chọn mã màu online
Công cụ chọn mã màu online mới nhất 2021
Mã màu (color code) là một phần rất quan trọng trong thiết kế web. Chúng ta sử dụng để định dạng màu sắc cho mọi thành phần của website như: màu chữ,…
Bài viết theo chuyên mục
Hiển thị bài viết theo chuyên mục không cần plugin
Đối với các themes mặc định hoặc miễn phí thường sẽ hiếm khi có chức năng hiện các bài viết theo chuyên mục (post by category). Thường chỉ có các bài viết…
Sticky sidebar
Tạo sidebar cố định (sticky sidebar) không cần plugin
Sidebar cố định hay sticky sidebar là cách làm cho một phần nội dung cố định trên màn hình khi người dùng kéo thanh trượt.Tác dụng của sticky sidebar là để làm…
Show hide nội dung
Cách làm nội dung ẩn hiện bằng javascript đơn giản
Bạn muốn làm một trang hướng dẫn chung về sử dụng website, diễn đàn,… Hoặc chẳng hạn một trang các câu hỏi thường gặp đi kèm câu trả lời. Thường thấy kiểu…