Trình chiếu tự động phát đơn giản - Thủ thuật CSS

HTML

Bao bọc với div là “trang trình bày”, có thể chứa bất kỳ nội dung nào.

   Pretty cool eh? This slide is proof the content can be anything.

CSS

Các trang trình bày cần phải được định vị tuyệt đối trong trình bao bọc. Điều này có một chút pizazz bổ sung:

#slideshow ( margin: 50px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); ) #slideshow > div ( position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; )

jQuery JavaScript

Chạy sau khi DOM đã sẵn sàng.

$("#slideshow > div:gt(0)").hide(); setInterval(function() ( $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); ), 3000);