Tạo Slide Ảnh Cho Web

      24

Slideshow tốt slider là một phần rất đặc trưng trong website hiện nay, thực tế thì chúng là một bộ chứa hồ hết hình ảnh có form size khá lớn rất có thể trượt hỗ tương giữa các ảnh, chúng thường được đặt tại đầu trang để biểu lộ những nội dung đáng chú ý của trang vào thời điểm đó. Trong bài này mình đã cùng chúng ta xây dựng một Slideshow dễ dàng và đơn giản với HTML, CSS và Javascript.

Bạn đang xem: Tạo slide ảnh cho web

*


*

1. Thi công giao diện

Trước tiên họ cần sẵn sàng các hình hình ảnh để hiển thị, các bạn tạo thư mục images cùng 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 bối cảnh cho trang, chúng ta tạo file index.html cùng cung cấp với thư mục imagesđể chạy chính, sau đó tạo những thành thành của slideShow bởi đoạn mã bên dưới đây:


*

*

*

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

Bài viết này được đăng tại


Vậy là xong xuôi bước chế tác giao diện, thời điểm này, cây thư mục sẽ sở hữu dạng như thế này:

Chúng ta cùng đưa sang bước tiếp theo sau nhé!

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

Trong cách này, họ sẽ dùng những đoạn mã CSS để định dạng những thành phần của trang, các bạn dán đoạn mã CSS sau đây vào bên phía trong thẻ style:


* box-sizing:border-boxh2 text-align: center;/* Slideshow container */.slideshow-container max-width: 500px; position: relative; margin: auto;/* Ẩn những slider */.mySlides display: none;/* Định dạng câu chữ Caption */.text color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;/* định dạng những chấm biế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 biến hóa 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 lớn opacity: 1
keyframes fade from opacity: .4 lớn opacity: 1

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

Xem thêm: Up Code Lên Host - Hướng Dẫn Upload Website Lên Host Chi Tiết Từ A

3. Xử lý bởi Javascript

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


Code RUN

Trong đoạn script trên, bao gồm một điểm các bạn cần để ý đó là lúc khai báo hàmshowSlides mình không còn để tham số mà vì sao mình lại điện thoại tư vấn 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 đang gángiá trị cho biến slideIndex. Nguyên nhân phải làm vấn đề đó ? Các bạn cũng có thể để ý hàmshowSlides() không hề có thông số vậy làm thế nào nó biết đề xuất hiển thị slide nào, nó phụ thuộc vào biến slideIndex mình khai báo thời gian đầu. Quy trinh buổi giao lưu của trang vẫn như sau:

Khi load chấm dứt trang tự động gọi hàmshowSlides() cùng với biếnslideIndex = 0, hàm này đã hiển thị slide tiếp nối tăng biếnslideIndex lên một đối chọi vị, tiếp đến nếu không tồn tại thao tác mình sử dụngsetTimeout(showSlides, 5000); để auto 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 làm việc vào các chấm, hàmcurrentSlide(n) sẽ tiến hành gọi với tham số n truyền vào là trang slide mong mỏi đến, trước tiên ta gán lại biếnslideIndex = n, kế tiếp gọi hàmshowSlides().

Xong rồi! giờ các bạn chạy tệp tin index.html với xem kế quả nhé.

4. Lời kết

Vậy là mình đã cùng các bạn xây dựng xong xuôi một slideShow 1-1 giản, qua nội dung bài viết này bản thân hi vọng các bạn đã cầm được cách thức buổi giao lưu của slideShow, các bạn cũng có thể dựa vào đóđể tùy biến hóa sao cho phù hợp nhất với trang web của mình.

Nếu có bất cứ thắc mắc nào các bạn cũng có thể để lại trong phần bình luận, Hẹn chạm chán lại vào các bài viết tiếp theo trên thietkewebhcm.com.vn.