Thiết kế mọi website trên nền tảng Wordpress

Tạo slide ảnh đơn giản và đẹp cho blog của bạn dùng Jquery

Slide ảnh giúp blog của bạn trông đẹp hơn và PRO hơn, sau đây mình xin chia sẻ cách tạo ra một slide ảnh đơn giản và đẹp dùng thư viện Jquery, mã rất đơn giản, bạn có thể cho vào blog WordPress hoặc cho vào Blogger hoặc Tumblr cũng được.

Trước hết, hãy sử dụng thư viện Jquery load từ Google API sẽ giúp bạn tiết kiệm băng thông và thời gian:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Tiếp theo, bạn tạo thử một đoạn HTML như sau:

<div class="slideshow">
  <img src="demopic/simpleslideshow/1.jpg" width="500" height="260" />
  <img src="demopic/simpleslideshow/2.jpg" width="500" height="260" />
  <img src="demopic/simpleslideshow/3.jpg" width="500" height="260" />
  <img src="demopic/simpleslideshow/4.jpg" width="500" height="260" />
  <img src="demopic/simpleslideshow/5.jpg" width="500" height="260" />
</div>

Và chuẩn bị dồn chúng vào trong một vị trí, cho chúng đè lên nhau:

.slideshow {position:relative; width:500px; height:260px;}
.slideshow img {position:absolute;left:0; top:0;}

Tiếp theo, các bạn phải ẩn ảnh đầu tiên để tạo slide cho nó chạy, sử dụng hiệu ứng Facein để hiển thị và faceout để ẩn, đầu tiên là ẩn cái ảnh đầu tiên đã:

$(document).ready( function() {
   $('.slideshow img:gt(0)').hide();
});

Bây giờ là việc hiển thị slideshow, ẩn cái ảnh đầu tiên và hiển thị cái ảnh tiếp theo, tính trong vòng 4 giây phải chuyển, ảnh bị ẩn sẽ chuyển xuống cuối cùng trong thẻ div để chuẩn bị hiển thị trong lần tiếp theo, thôi thì để tiện cho các bạn, làm luôn một cái function như sau:

$(function() {
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){
      $('.slideshow :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.slideshow');}, 
      4000);
})

Đến đoạn này ta đã có một cái slideshow đẹp đẹp rồi đấy,  nhớ cho hàm này vào trong thẻ head của trang nhé, đoạn code đúng sẽ phải là như sau:

<script>
$(document).ready( function() {
FUNCTION !
});
</script>

Chúc các bạn thành công !

TÁC GIẢ:

Tôi là Jam, thâm niên 7 năm thiết kế website và làm SEO. Hãy theo dõi blog của tôi để nhận được nhiều chia sẻ thú vị xung quanh chủ đề công nghệ.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *