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 (Bạn có thể xem lại bài 4: hướng dẫn chọn element nâng cao)

$('.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);
})