Jquery - Slide Show - Viblo
Có thể bạn quan tâm
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.
Bài viết sau sẽ hướng dẫn bạn cách tự tạo ra một slideshow đơn giản bằng cách sử dụng Jquery .
Slideshow sử dụng hiệu ứng fadein và fadeout , slideDown, slideUp có sẵn trong jQuery.
Step 1. Download thư viện jquery hoặc sử dụng url như dưới
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.jsStep 2. Tạo Trang HTML và gắn thư viện jquery
<html> <head> <title>Demo Jquery Slide Show</title> <meta charset='UTF-8'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body> <div class="demoslide"> <img src="images/1.jpg" width='500px' height='200px'> <img src="images/2.jpg" width='500px' height='200px'> <img src="images/3.jpg" width='500px' height='200px'> <img src="images/4.jpg" width='500px' height='200px'> <img src="images/5.jpg" width='500px' height='200px'> </div> </body> </html>Step 3: Tạo Css cho slideshow
.demoslide { margin-top: 100px; width: 500px; margin: 0 auto; height: 200px; overflow: hidden; }Vậy là ta đã tạo xong phần giao diện.
Step 4: Viết jquery tạo slideshow chuyển động cho ảnh
<script type="text/javascript"> $(function() { $('.demoslide img:gt(0)').hide(); setInterval(function(){ $('.demoslide :first-child').fadeOut() //FadeOut là ảnh đang hiện .next('img').fadeIn() //fadeIn ảnh tiếp theo .end().appendTo('.demoslide'); // chuyển vị trí ảnh xuống cuối }, 3000); }) </script>Giải thích source code:
$('.demoslide img:gt(0)').hide();Đoạn code này có nghĩa là ẩn tất cả các ảnh trừ ảnh đầu tiên
setInterval(function(){},3000); // đặt thời gian là 3sSetup thời gian chuyển hình ảnh bằng hàm setInterval
$(function() { setInterval(function(){ $('.demoslide :first-child').fadeOut() //FadeOut là ảnh đang hiện .next('img').fadeIn()}, 3000); })FadeOut là ảnh đang hiện, fadeIn ảnh tiếp theo
.end().appendTo('.demoslide')Do javascript ở trên luôn luôn chọn ảnh đầu tiên trong slideshow để ẩn và chọn ảnh tiếp theo để hiện. Ta sẽ xử lý bằng cách chuyển ảnh đầu tiên (vừa bị ẩn đi) xuống vị trí cuối cùng sau khi chạy hiệu ứng.
Step 5. Demo. Như vậy ta đã có 1 slideshow đơn giản. Source code tổng hợp
<html> <head> <title>Demo Jquery Slide Show</title> <meta charset='UTF-8'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <style type="text/css"> .demoslide { margin-top: 100px; width: 500px; margin: 0 auto; height: 200px; overflow: hidden; } </style> </head> <script type="text/javascript"> $(function() { $('.demoslide img:gt(0)').hide(); setInterval(function(){ $('.demoslide :first-child').fadeOut() //FadeOut là ảnh đang hiện .next('img').fadeIn() //fadeIn ảnh tiếp theo .end().appendTo('.demoslide'); // chuyển vị trí ảnh xuống cuối }, 3000); }) </script> <body> <div class="demoslide"> <img src="images/1.jpg" width='500px' height='200px'> <img src="images/2.jpg" width='500px' height='200px'> <img src="images/3.jpg" width='500px' height='200px'> <img src="images/4.jpg" width='500px' height='200px'> <img src="images/5.jpg" width='500px' height='200px'> </div> </body> </html>Chạy thử nghiệm ta có slide sau
Thay đổi hiệu ứng bạn có thể sử dụng slideDown, slideUp
$('.demoslide :first-child').slideDown() //FadeOut là ảnh đang hiện .next('img').slideDown() //Như vậy đã hoàn tất quá trình tạo SlideShow hình ảnh đơn giản bằng JQUERY và CSS. Tuy nhiên đây chỉ là SlideShow đơn giản vì thế hiệu ứng chưa được đẹp mắt, các bạn có thề tìm hiểu thêm để tạo ra Slideshow đẹp hơn.
Từ khóa » Thư Viện Slide
-
15 Thư Viện Slider Jquery Miễn Phí Cho Dự án Website Của Bạn | TopDev
-
28 Thư Viện Slider Javascript Cho Phát Triển Website
-
Mẫu Powerpoint Thư Viện Theme | Hình Nền Slide Tải Miễn Phí
-
Tài Liệu Thư Viện - SlideShare
-
Làm Hiệu ứng Slide Với Thư Viện Owl Carousel - YouTube
-
Những Jquery Slider Miễn Phí Đẹp Mắt Nhất - Wpuonline
-
20 Slider JQuery Hữu Ích - Code Tutsplus
-
Thiết Kế Slide Thuyết Trình Miễn Phí - Canva
-
Làm Slide đơn Giản Hơn Với Swipper Slide (Part 1) - Viblo
-
Tạo Slideshow Nội Dung Chuyên Nghiệp Với Thư Viện Slick | Gextend
-
Làm Slide Dễ Nhất Với Thư Viện Owl Carousel - SEO Website
-
Thư Viện Ebook Slide Kế Toán
-
Thư Viện Bài Giảng