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Ả

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

1 Chuyển ảnh bằng nút mũi tên

Manual Slideshow

2 Tự động đổi ảnh không hiệu ứng

Automatic Slideshow

3 Tự động đổi ảnh có hiệu ứng

4 Slideshow Indicators

Manual Slideshow

3 Bình luận

Trả lời Hủy

1 Chuyển ảnh bằng nút mũi tên

Manual Slideshow

2 Tự động đổi ảnh không hiệu ứng

Automatic Slideshow

3 Tự động đổi ảnh có hiệu ứng

4 Slideshow Indicators

Manual Slideshow

3 Bình luận

Trả lời Hủy

Bài viết liên quan