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 Slider Jquery
-
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
-
20 Slider JQuery Hữu Ích - Code Tutsplus
-
Những Jquery Slider Miễn Phí Đẹp Mắt Nhất - Wpuonline
-
Top 15 Cách Sử Dụng Jquery Slider
-
Tạo Slideshow Siêu Đơn Giản Với JQuery - CodeLearn
-
20 Thư Viện JQuery Slider Ngon Bổ Rẻ - Code4Newbie
-
Thư Viện ảnh & Thanh Trượt JQuery Miễn Phí - Tốt Nhất - HTML
-
Hướng Dẫn Cách Tạo Slide Bài Viết Bằng Jquery - HocwebGiare
-
Các Thư Viện Plugin Hiệu ứng JQuery Tốt (2019) - NIIT-ICT Hà Nội
-
Tạo Slideshow Nội Dung Chuyên Nghiệp Với Thư Viện Slick | Gextend
-
Làm Hiệu ứng Slide Với Thư Viện Owl Carousel - YouTube
-
Chia Sẻ JQuery Slider Before After ( JQuery So Sánh ảnh Trước - Sau )
-
Làm Slide Dễ Nhất Với Thư Viện Owl Carousel - SEO Website