Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 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.
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:
<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.
Bài viết này được đăng tại [free tuts .net]
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:
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:
* {
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:
<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:
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ếnslideIndex = 0, hàm này sẽ hiển thị slide sau đó tăng biếnslideIndexlên một đơn vị, tiếp đến nếu không có thao tác mình sử dụngsetTimeout(showSlides, 5000);để tự động chuyển slider sau 5s, khi nàyslideIndex = 1, và hàmshowSlides()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ốntruyền vào là trang slide muốn đến, đầu tiên ta gán lại biếnslideIndex = n, sau đó gọi hàmshowSlides().
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
