Thứ ba, ngày 21 tháng 11 năm 2017

Tạo slideshow đơn giản với jQuery

Ngày đăng: 2/3/2011, 23:50:13PM | Lượt xem: 4,231
Hot!

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.

Bắt đầu với mã HTML và CSS

<div class="neoslideshow">
  <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>

Dùng CSS đặt tất cả các ảnh vào cùng một vị trí

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

Slideshow sử dụng hiệu ứng fadein và fadeout có sẵn trong jQuery. Trước hết, bạn cần ẩn tất cả các ảnh trừ ảnh đầu tiên

$('.neoslideshow img:gt(0)').hide();

Tiếp theo, đặt thời gian để chuyển ảnh (mỗi ảnh sẽ dừng lại 4 giây)

setInterval(function(){ },4000);

Bắt đầu với hiệu ứng chuyển ảnh: FadeOut ảnh đang hiện, fadeIn ảnh tiếp theo

$('.neoslideshow :first-child').fadeOut()
.next('img').fadeIn()

Tới đây thì có một vấn đề là mã 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

.appendTo('.neoslideshow')

Như vậy, mã sử dụng sẽ là:

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

 

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.