MENUS
IMAGES
BUTTONS
FORMS
FILTERS
TABLES
MORE
WEBSITE
GRID
GOOGLE MAP
CONVERTERS
HOW TO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Hướng dẫn tạo Slideshow với HTML, CSS và Javascript

Slideshow hay slider là một phần rất quan trọng trong website hiện nay, thực chất thì chúng là một bộ chứa những hình ảnh có kích thước khá lớn có thể trượt qua lại giữa các ảnh, chúng thường được đặt ở đầu trang để mô tả những nội dung đáng chú ý của trang vào thời điểm đó. Trong bài này mình sẽ cùng các bạn xây dựng một Slideshow đơn giản với HTML, CSS và Javascript.

1. Xây dựng giao diện

Trước tiên chúng ta cần chuẩn bị các hình ảnh để hiển thị, các bạn tạo thư mục images và dán vào 3 hình ảnh slide-1.jpg, slide-2.jpg"và slide-3.jpg.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Tiếp theo là xây dựng giao diện cho trang, các bạn tạo file index.html cùng cấp với thư mục images để chạy chính, sau đó tạo các thành thành của slideShow bằng đoạn mã dưới đây:

Code RUN
<div class="slideshow-container">
  <h2>Freetus.net hướng dẫn tạo slideShow đơn giản</h2>
  <div class="mySlides fade">
    <img src="./images/slide-1.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide đầu tiên!</div>
  </div>

  <div class="mySlides fade">
    <img src="./images/slide-2.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide thứ 2!</div>
  </div>

  <div class="mySlides fade">
    <img src="./images/slide-3.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide thứ 3!</div>
  </div>
</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(0)"></span> 
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
</div>

Ở đây, mình có gán sự các sự kiện trực tiếp ở phần tử HTML, nó khá là thiếu chuyên nghiệp tuy nhiên vì chúng ta chủ yếu tìm hiểu về định dạng và cách xử lý với CSS và Javascript nên mình sẽ sử dụng phương pháp này để các bạn dể hiểu hơn.

Vậy là xong bước tạo giao diện, lúc này, cây thư mục sẽ có dạng như thế này:

huong dan tao slideshow voi html css va javascript 1 jpg

Chúng ta cùng chuyển sang bước tiếp theo nhé!

2. Thêm CSS để định dạng các thành phần của slideShow

Trong bước này, chúng ta sẽ dùng các đoạn mã CSS để định dạng các thành phần của trang, các bạn dán đoạn mã CSS dưới đây vào bên trong thẻ style:

Code RUN
* {
  box-sizing:border-box
}
h2 {
  text-align: center;
}
/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}
/* Ẩn các slider */
.mySlides {
    display: none;
}
/* Định dạng nội dung Caption */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* định dạng các chấm chuyển đổi các slide */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
/* khi được hover, active đổi màu nền */
.active, .dot:hover {
  background-color: #717171;
}

/* Thêm hiệu ứng khi chuyển đổi các slide */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

Trong đoạn mã trên mình đã ẩn hết các slide hình ảnh đi, trong bước tiếp theo chúng ta sẽ sử dụng Javascript để hiển thị những hình ảnh phù hợp.

3. Xử lý bằng Javascript

Các bạn thêm đoạn mã script dưới đây vào sau thẻ body:

Code RUN
<script>
  //khai báo biến slideIndex đại diện cho slide hiện tại
  var slideIndex;
  // KHai bào hàm hiển thị slide
  function showSlides() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i++) {
         slides[i].style.display = "none";  
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
      }

      slides[slideIndex].style.display = "block";  
      dots[slideIndex].className += " active";
      //chuyển đến slide tiếp theo
      slideIndex++;
      //nếu đang ở slide cuối cùng thì chuyển về slide đầu
      if (slideIndex > slides.length - 1) {
        slideIndex = 0
      }    
      //tự động chuyển đổi slide sau 5s
      setTimeout(showSlides, 5000);
  }
  //mặc định hiển thị slide đầu tiên 
  showSlides(slideIndex = 0);


  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
</script>

Trong đoạn script trên, có một điểm các bạn cần lưu ý đó là khi khai báo hàm showSlides mình không hề để tham số mà tại sao mình lại gọi hàm như thế này:

Code
showSlides(slideIndex = 0);
showSlides(slideIndex = n);

Thực chất đây không phải là truyền tham số, câu lệnh này có nghĩa là trước khi chạy hàm showSlides() thì mình sẽ gán giá trị cho biến slideIndex. Tại sao phải làm điều này ? Các bạn có thể để ý hàm showSlides() không hề có tham số vậy làm sao nó biết cần hiển thị slide nào, nó dựa vào biến slideIndex mình khai báo lúc đầu. Quy trinh hoạt động của trang sẽ như sau:

  • Khi load xong trang tự động gọi hàm showSlides() với biến slideIndex = 0, hàm này sẽ hiển thị slide sau đó tăng biến slideIndex lên một đơn vị, tiếp đến nếu không có thao tác mình sử dụng setTimeout(showSlides, 5000); để tự động chuyển slider sau 5s, khi này slideIndex = 1, và hàm showSlides() lại lặp lại quá trình đó.
  • Nếu có thao tác vào các chấm, hàm currentSlide(n)  sẽ được gọi với tham số n truyền vào là trang slide muốn đến, đầu tiên ta gán lại biến slideIndex = n, sau đó gọi hàm showSlides().

Xong rồi! giờ các bạn chạy file index.html và xem thành quả nhé.

4. Lời kết

Vậy là mình đã cùng các bạn xây dựng xong một slideShow đơn giản, qua bài viết này mình hi vọng các bạn đã nắm được cách thức hoạt động của slideShow, các bạn có thể dựa vào đó để tùy biến sao cho phù hợp nhất với website của mình. 

Nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, Hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top