Jquery 02 – Hướng dẫn tạo slideshow ảnh bằng JQUERY (P1)

0
537

I. Lời giới thiệu

  • jQuery đã và đang trở thành một công cụ rất hữu dụng cho các nhà thiết kế web. Một trong những thành công là tạo ảnh trượt (gallery, slideshow, carousel…). Hôm nay tôi giới thiệu tới các bạn cách tạo một slideshow đơn giản

II. Tiến hành

  • Trước hết ta cần chuẩn bị file jquery.js,slides.min.jquery, các bạn có thể truy cập trang jquery.com để tải
  • Chuẩn bị ảnh các bạn muốn làm slide. Hai file jquery.js và file ảnh tôi cần lưu vào một folder slideshow để tiện gọi ra.

2

1. Bắt đầu với mã HTML

 

 

  • Giải thích : Toàn bộ slideshow chúng ta để trong div.slides. Bên trong đó chứa ảnh slideshow là thẻ. Thêm thuộc tính “display:none” để ẩn các hình ảnh khi chúng đè nên nhau
2. Sử dụng CSS 

 

 

  • Chúng hiển thị trên trình duyệt như này

12

  • Tôi sẽ them 2 nút điều hướng bằng đoạn mã html sau

 

  • Và CSS cho chúng

 

 

  • Trong slide thì sẽ có các nút phân trang ở đây chúng ta có 5 ảnh thì sẽ tương đương với 5 nút <ul>

 

 

  • Tôi sẽ css cho nó

 

 

  • Chúng ta có được

ac

3. Sử dụng Jquery
  • Và giờ chúng ta sẽ đi xử lí nút next và prev khi click vào sẽ có hiệu ứng chuyển ảnh ở đây chúng ta sẽ xử lí bằng jquery.ta add jquery vào

 

 

  • Và ta sẽ xử lí jquery trong đoạn code script sau

III. Tổng kết

  • Như vậy tôi vừa hướng dẫn cho các bạn tạo slideshow sử dụng jquery. Cảm ơn và hẹn gặp lại các bạn. Chúc các bạn học thật tốt

Tác Giả : Hà Trần Vietpro

[Total: 4    Average: 3.5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here