HomeTạo slideshow ảnh với Jquery
Bạn đã biết tới rất nhiều plugin của jQuery cho
phép bạn tạo các slideshow với nhiều hiệu ứng đẹp, chuyên nghiệp. Cách sử dụng
cũng dễ dàng, thậm chí không cần biết viết mã javascript. Nhưng nếu bạn muốn
học cách viết một slideshow của riêng mình thì bài viết này dành cho bạn, bài
hướng dẫn làm slideshow dạng đơn giản nhất với jQuery.
Để làm được ví
dụ này, bạn cần tạo cho mình một thư mục bất kì, bên trong thư mục có những
file sau:
Trong thư mục images, bạn có thể để 5 hoặc 6
bức ảnh bất kỳ vào nó, bạn có thể lấy ảnh trong máy tính của mình vứt vào đó
hoặc download ảnh trên mạng,....
OK, bước đầu tiên là bạn mở trình viết code
notepad++ lên, open file index.html rồi
viết như hình sau:
Bước 2 là dùng css đặt tất cả các ảnh vào cùng
một ví trí, mã code style.css như sau:
Xong xuôi, bạn viết một đoạn mã script cho nó để slideshow hoạt động theo đúng yêu cầu của mình, mã code như sau:
Bạn viết mã script vào trong của thẻ head, như sau:
Hoàn thiện code rồi đó, giờ bạn có thể Save tất
cả lại, rồi chạy file index.html để xem kết quả của mình nào.
Dưới đây là những dòng giải thích code ở trên:
Nếu bạn có đam mê và yêu thích lập trình web, hãy đến tham khảo khóa học lập trình website trên ngôn ngữ PHP MySQL của công ty Việt Tâm Đức. Click ngay hình ảnh dưới để biết thông tin chi tiết rõ hơn nhé!
Chúc bạn dám ước mơ theo đuổi lập trình web!
Bài liên quan
