Code Slide Ảnh Chạy Ngang Bằng Jquery Css Image Slider, Bài 11: Hiệu Ứng Slide

Posted on by adminChuyên mục:Kiến thức Internet
Slideshow hay slider là một phần rất quan trọng trong website lúc bấy giờ, thực ra thì chúng là một bộ chứa những hình ảnh có size khá lớn hoàn toàn có thể trượt qua lại giữa những ảnh, chúng thường được đặt ở đầu trang để miêu tả những nội dung đáng chú ý quan tâm của trang vào thời gian đó. Trong bài này mình sẽ cùng những bạn kiến thiết xây dựng một Slideshow đơn thuần với HTML, CSS và Javascript .Bạn đang xem : Slide ảnh chạy ngang bằng jquery

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

Trước tiên tất cả chúng ta cần sẵn sàng chuẩn bị những hình ảnh để hiển thị, những 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!
Nội dung caption của slide tiên phong ! 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ự những sự kiện trực tiếp ở thành phần HTML, nó khá là thiếu chuyên nghiệp tuy nhiên vì tất cả chúng ta đa phần tìm hiểu và khám phá về định dạng và cách giải quyết và xử lý với CSS và Javascript nên mình sẽ sử dụng giải pháp này để những 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, tất cả chúng ta sẽ dùng những đoạn mã CSS để định dạng những thành phần của trang, những 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 những slide hình ảnh đi, trong bước tiếp theo tất cả chúng ta sẽ sử dụng Javascript để hiển thị những hình ảnh tương thích.

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 những bạn cần quan tâm đó 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 hoàn toàn có thể chú ý hàmshowSlides ( ) không hề có tham số vậy làm thế nào 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 giải trí 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().Khi load xong trang tự động hóa 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ị chức năng, tiếp đến nếu không có thao tác mình sử dụngsetTimeout ( showSlides, 5000 ) ; để tự động hóa chuyển slider sau 5 s, khi nàyslideIndex = 1, và hàmshowSlides ( ) lại lặp lại quy trình đó. Nếu có thao tác vào những chấm, hàmcurrentSlide ( n ) sẽ được gọi với tham số n truyền vào là trang slide muốn đến, tiên phong 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ĩaXong rồi ! giờ những 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 những bạn kiến thiết xây dựng xong một slideShow đơn thuần, qua bài viết này mình hy vọng những bạn đã nắm được phương pháp hoạt động giải trí của slideShow, những bạn hoàn toàn có thể dựa vào đóđể tùy biến sao cho tương thích nhất với website của mình .Nếu có bất kỳ vướng mắc nào những bạn hoàn toàn có thể để lại trong phần phản hồi, Hẹn gặp lại trong những bài viết tiếp theo trên obatambeienwasirherbal.com.

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
Bài sau Bài tiếpChuyê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 tất cả chúng ta sẽ học HTML và CSS trước .

admin