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.
Đang xem: Slide ảnh chạy ngang bằng jquery
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 theolà 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
Freetus.net hướng dẫn tạo slideShow đơn giản
Nội dung caption của slide đầu tiên!
Nội dung caption của slide thứ 2!
Nội dung caption của slide thứ 3!
Ở đâ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:
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
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àmshowSlides 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àmshowSlides() thì mình sẽ gángiá trị cho biến slideIndex. Tại sao phải làm điều này ? Các bạn có thể để ý hàmshowSlides() 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àmshowSlides() với biếnslideIndex = 0, hàm này sẽ hiển thị slide sau đó tăng biếnslideIndex lê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àmcurrentSlide(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ếnslideIndex = n, sau đó gọi hàmshowSlides().
Xem thêm: Nhoi Là Gì ? Nghĩa Của Từ Nhoi Trong Tiếng Việt Nhoi Là Gì, Nhoi Viết Tắt, Định Nghĩa, Ý Nghĩa
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 in4tintuc.com.
Xem thêm: Đường Và Ung Thư Và Đường Và Ung Thư Có Mối Tương Quan Như Thế Nào?
Tham khảo: w3schools.com
DEMO
Bài sau Bài tiếp
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.