Và để tránh dùng FLASH, chúng ta có thể sử dụng CSS,HTML kết hợp với JQUERY tạo nên hiệu ứng trình diễn hình ảnh. Do đó hôm nay tôi sẽ hướng dẫn các bạn tạo hiệu ứng SlideShow đơn giản bằng CSS và JQUERY.
Bước 1 :
- Các bạn tạo 1 trang html có nội dung phần Body như sau :
- Trong phần nội dung này ta sẽ sử dụng thẻ div co class là slideShow để chứa hình ảnh.
- Hình ảnh hiện tại để trong thư mực imgs.
Bước 2 :
- Tiếp theo ta sẽ định dạng cho các thẻ img chồng lên nhau,và cùng 1 vị trí bằng lệnhposition:absolute (Lưu ý : thẻ DIV bên ngoài ta phải cho thuộc tính position : relative).
- Định dạng cho kích thước hình width:500px và height:300px.
Bước 3:
- Tiếp theo chúng ta sẽ sử dụng JQUERY để slideshow hoạt động .
- Ở đây chúng ta sử sụng JQUERY có sẵn của Google,nếu không có bạn có thể download tại đây .
- Trong phần code JQUERY chúng ta sẽ nhập như sau :
- Để cho hiện ảnh đầu tiên và ẩn các ảnh khác đi ta sử dụng lệnh
$('.slideShow img:gt(0)').hide();
- Chúng ta đang sử dụng hiệu ứng slideDown() và slideUp cho ảnh,bạn cũng có thể thay thế bằng lệnh fadeOut() và fadeIn() .
- Số 2000 ở đây có nghĩa là thời gian dừng của mỗi ảnh với tỷ lệ 1000 = 1 giây ,các bạn có thể thay dổi tùy ý.
Hoàn tất :
Thế là các bạn đã 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.
إرسال تعليق