tạo slide ảnh bằng jquery

By Admin 17/09/2023 0

Bạn vẫn muốn test mức độ bản thân nhằm tự động thực hiện một slide hình ảnh với jQuery? Trong bài xích này bản thân tiếp tục share cho tới chúng ta cơ hội bản thân code một slideshow ra sao. Từ nội dung bài viết này những chúng ta có thể xem thêm và sáng tạo ra thêm thắt nhằm rất có thể dẫn đến mang lại phiên bản thân thích những thành phầm tuyệt hảo nhé.

Bạn đang xem: tạo slide ảnh bằng jquery

jquery là gì?

Đầu tiên, mình đang có nhu cầu muốn reviews một ít về jQuery. jQuery là tủ sách được ghi chép kể từ JavaScript, chung thi công những công dụng bởi vì Javascript đơn giản, nhanh chóng và nhiều chức năng rộng lớn. jQuery được tích ăn ý nhiều module không giống nhau. Từ module cảm giác cho tới module truy vấn selector. Và thời điểm hôm nay bản thân tiếp tục dùng những module này sẽ tạo slideshow với tương đối nhiều cảm giác rất đẹp, có tính chuyên nghiệp. Now, Let's go!

Tổ chức thư mục

Step 1: Tạo Trang HTML và import jQuery

1.1 Tạo khuông HTML

Trong tệp tin index.html, bản thân đem đoạn code sau:

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slideshow</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <img class="slide" src="img/picture1.png" alt=""> <img class="slide" src="img/picture2.png" alt=""> <img class="slide" src="img/picture3.png" alt=""> <img class="slide" src="img/picture4.png" alt="" > </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>

Trong đoạn code bên trên bản thân import jQuery bằng CDN nhé. Các chúng ta có thể nhìn thấy jQuery CDN bên trên phía trên.

1.2: Thêm những button

Mình tiếp tục thêm thắt những button sau vô file index.html:

  • 2 button nên và trái
  • 4 button viết số từ là một cho tới 4

<img class="btn-change" id="next" src="icon/next.png" alt=""> <img class="btn-change" id="prev" src="icon/prev.png" alt=""> <div class="change-img"> <button class="active">1</button> <button>2</button> <button>3</button> <button>4</button> </div>

Lưu ý: Bạn nên sửa đổi đường đi vô tính chất src cho phù phù hợp với cơ hội tổ chức triển khai folder và thương hiệu hình ảnh.

Step 2: Tùy chỉnh bởi vì CSS

Oops! Trang trang web của tất cả chúng ta vẫn còn đấy lộn xộn thế này. Giờ tất cả chúng ta cùng với nhau code CSS nhằm slide hiện thị nhé!

2.1 Xử lý hình ảnh:

  • Ẩn những hình hình ảnh số 2,3,4 bằng phương pháp thêm thắt tính chất display: none
  • Điều chỉnh độ cao thấp hình hình ảnh về 710x400

img.slide { width: 710px; height: 400px; } img.slide:not(:first-child) { display: none; }

Trong đoạn code bên trên bản thân đem dùng selector :not(:first-child). Đây là việc phối kết hợp thân thích 2 selector

  • :not(element) lựa chọn những thành phần nước ngoài trừ element
  • :first-child lựa chọn thành phần đầu tiên

Như vậy, bằng phương pháp dùng :not(:first-child) bản thân rất có thể đặt điều mang lại toàn bộ những hình ảnh nước ngoài trừ bức trước tiên thuộc tính display: none

2.2 thay đổi container chứa chấp hình ảnh (Kích thước, viền khuông, vị trí)

.container { width: 710px; height: 460px; margin: 0 auto; border: 2px solid #ccc; position: relative; padding: 5px; }

2.3 thay đổi 2 button gửi slide (Kích thước, vị trí)

.btn-change { width: 30px; height: 30px; position: absolute; top: 50%; transform: translateY(-100%); } #next { right: 10px;; } #prev { left: 10px; }

2.4 Điều chỉnh 4 button số (Kích thước, sắc tố, địa điểm, cảm giác di chuột)

.change-img { text-align: center; margin-top: 1rem; } button { background: rgb(0, 153, 255); width: 30px; height: 30px; border-radius: 50%; margin-right: 20px; font-weight: bold; border: none; } button.active { background: rgb(7, 101, 163); color: white; }

Step 3: Xử lý JS

Mình khuyến cáo chúng ta nên nhằm toàn cỗ code chủ yếu vô hàm:

$(document).ready(function() { //Your code });

Mục đích là nhằm đàm bảo document được render đi ra không còn thì các script vô nó vừa được thực ganh đua. Tránh tình huống Lúc những bộ phận document không được render không còn thì JS đang được gọi (rất dễ khiến đi ra lỗi hoặc ko thực ganh đua vừa ý muốn)

3.1 Xác lăm le số chỉ địa điểm mang lại hình ảnh đầu và hình ảnh cuối

Tại phía trên chúng ta cần thiết trở về index.html và bổ sung cập nhật thêm 1 tính chất cho những image vô slide. Mục đích của việc thực hiện này là nhằm viết số cho những tấm hình. phẳng cơ hội thêm 1 tính chất mới nhất và gán độ quý hiếm trong những thẻ image như sau:

<img class="slide" src="img/picture1.jpg" idx="0" alt=""> <img class="slide" src="img/picture2.jpg" idx="1" alt=""> <img class="slide" src="img/picture3.jpg" idx="2" alt=""> <img class="slide" src="img/picture4.jpg" idx="3" alt="" >

Tương tự động với 4 button

<button class="active" idx="0">1</button> <button idx="1">2</button> <button idx="2">3</button> <button idx="3">4</button>

Giờ thì từng tấm hình và đã được gán địa điểm nhờ tính chất idx. Tiếp cho tới, các bạn gửi quý phái script.js để tổ chức gán độ quý hiếm xác lập hình ảnh đầu và hình ảnh cuối

var stt = 0; var endImg = $("img.slide:last").attr("idx");

3.2 Thêm sự khiếu nại mang lại 4 button số

$("button").click(function() { stt = $(this).attr("idx"); $("img.slide").hide(); $("img.slide").eq(stt).show(); $("button").removeClass("active"); $("button").eq(stt).addClass("active"); });

Tư tưởng của đoạn code như sau: Khi click vô một trong các 4 button thì ...

Xem thêm: tên oanh có ý nghĩa gì

  • Biến stt tiếp tục nhận số chỉ của button nhận sự khiếu nại click qua chuyện tính chất idx.
  • Ẩn toàn cỗ hình ảnh vô slide
  • Hiện thị hình ảnh đem số chỉ stt (Chính là hình ảnh toạ lạc ứng với button các bạn click)
  • Xóa class active với toàn bộ những button và phối lại class active mang lại button nhận sự khiếu nại click

3.3 Code sự khiếu nại mang lại 2 button gửi slide

Tương tự động tớ tổ chức code mang lại 2 button gửi slide

$("#next").click(function () { if (++stt > endImg) { stt = 0; } $("img.slide").hide(); $("img.slide").eq(stt).show(); $("button").removeClass("active"); $("button").eq(stt).addClass("active"); }); $("#prev").click(function () { if (--stt < 0) { stt = endImg; } $("img.slide").hide(); $("img.slide").eq(stt).show(); $("button").removeClass("active"); $("button").eq(stt).addClass("active"); });

Tại phía trên chúng ta chú ý một ít về đoạn xử lý vấn đề:

  • Khi hình ảnh số 4 đang được hiện nay thị và button next nhận sự kiện
  • Khi hình ảnh số 1 đang được hiện nay thị và button prev nhận sự kiện

Giải pháp: Quý Khách nên tăng hoặc hạn chế stt cút 1 đơn vị chức năng. Sau cơ đối chiếu coi, stt đem ở ngoài khoảng chừng kể từ 0-3 hay là không. Nếu vi phạm ĐK thì phải kê lại độ quý hiếm mang lại stt.

Lưu ý:

  • ++x: Tăng x lên 1 đơn vị chức năng rồi thực ganh đua loại code cơ.
  • x++: Sử dụng x nhằm thực ganh đua loại code. Khi loại code kết thúc đẩy thì mới có thể tăng x lên 1 đơn vị chức năng.

3.4 Đặt khoảng chừng thời hạn tự động hóa gửi slide

var interval; var timer = function () { interval = setInterval(function () { $("#next").click(); }, 5000); }; timer();

Lý vì thế tuy nhiên bản thân ghi chép code đem chút dông dài rộng lớn thông thường tiếp tục đước lý giải ở trong phần bên dưới nhé!

3.5 Tối ưu code

Các các bạn đem nhìn thấy đoạn code này tái diễn không hề ít không?

$("img.slide").hide(); $("img.slide").eq(stt).show(); $("button").removeClass("active"); $("button").eq(stt).addClass("active");

Giải pháp là những chúng ta có thể fake đoạn code này vào một trong những hàm và tái mét dùng lại nó

var changeImg = function(stt) { $("img.slide").hide(); $("img.slide").eq(stt).show(); $("button").removeClass("active"); $("button").eq(stt).addClass("active"); clearInterval(interval); timer(); }; $("button").click(function() { stt = $(this).attr("idx"); changeImg(stt); }); $("#next").click(function() { if(++stt > endImg) { stt = 0; } changeImg(stt); }); $("#prev").click(function() { if(--stt < 0) { stt = endImg; } changeImg(stt); });

Giờ bản thân tiếp tục lý giải về kiểu cách bản thân ghi chép hàm timer(). Đó là vì thế nếu như bạn chỉ dùng đoạn code sau ở cuối hàm $(document).ready()

setInterval(function () { $("#next").click(); }, 5000);

Thì tiếp tục xẩy ra một yếu tố là lúc timer() chạy cho tới khoảng chừng 2000ms tuy nhiên sự khiếu nại gửi slide ra mắt thì chỉ với sau 500ms-1000ms sự khiếu nại gửi slide lại được kích hoạt tiếp. Như vậy sẽ tạo nên đi ra tạo ra hưởng thụ rất rất không dễ chịu cho tất cả những người sử dụng.

Giải pháp: Đó là code như mình! Đùa vậy thôi, có rất nhiều xử lý không giống nhau. Nhưng bản thân chọn lựa cách "gói" đoạn code tự động hóa gửi slide vô 1 hàm thương hiệu là timer(). Cùng với này đó là lưu setInterval() vào một trong những trở thành. Sau cơ Lúc tuy nhiên sự khiếu nại gửi slide xẩy ra (tức là hàm changeImg() được gọi thì setInterval() sẽ tiến hành reset và gọi lại timer() để thời hạn được đặt điều lại từ trên đầu.

3.6 Thêm cảm giác gửi ảnh

Để mang lại quy trình gửi slide coi đẹp lung linh hơn, chúng ta có thể thêm thắt cảm giác mang lại nó bằng phương pháp thay cho loại code 

$("img.slide").eq(stt).show();

bằng loại code

$("img.slide").eq(stt).fadeIn(500);

Phù! Cuối nằm trong thì đã và đang đi ra trở thành trái ngược rồi!

Các chúng ta có thể coi toàn cỗ source code bên trên liên kết Github: https://github.com/pvtd264/slideUsingJquery

Bonus

Dưới đó là một liên kết những chúng ta có thể xem thêm nhằm thỏa mức độ tạo nên thêm thắt. Chúc chúng ta trở thành công!

Xem thêm: yugioh tap 122

  • https://www.w3schools.com/jquery/jquery_animate.asp
  • https://crunchify.com/5-cool-useful-jquery-tips-tricks-solutions/
  • https://colorlib.com/wp/jquery-animation-library-plugins/
  • https://css-tricks.com