JQuery: Slideshow Tự Tạo Dùng JQuery | V1Study

Trang chủ » Cách Sử Dụng Jquery Slider » JQuery: Slideshow Tự Tạo Dùng JQuery | V1Study

Có thể bạn quan tâm

Dưới đây là ví dụ về việc tạo Slideshow bằng jQuery.

Tổ chức thư mục của ví dụ như sau:

Tổ chức thư mục

Dưới đây là nội dung của từng file:

File index.html:

<!DOCTYPE html> <html> <head> <title>Slideshow-tự tạo-V1</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/css.css"> </head> <body> <section class="container"> <img class="slide" src="img/php.jpg" idx="0" alt=""> <img class="slide" src="img/react.png" idx="1" alt=""> <img class="slide" src="img/sql-server.jpg" idx="2" alt=""> </section> <img class="btn-change" id="next" src="img/arrow-right.png" alt=""> <img class="btn-change" id="prev" src="img/arrow-left.png" alt=""> <section class="change-img"> <button class="active" idx="0">1</button> <button idx="1">2</button> <button idx="2">3</button> </section> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="js/js.js"></script> </body> </html>

File css.css:

img.slide{ width: 800px; height: 600px; } img.slide:not(:first-child) { display: none; } .container{ width: 800px; height: 600px; margin: 0 auto; border: 2px solid #ccc; position: relative; padding: 5px; } .btn-change{ width: 30px; height: 30px; position: absolute; top: 50%; transform: translateY(-100%); } #next{ right: 10px;; } #prev{ left: 10px; } .change-img{ text-align: center; margin-top: 1rem; } button{ background: #658000; width: 30px; height: 30px; border-radius: 50%; margin-right: 20px; font-weight: bold; border: none; } button.active{ background: blue; color: white; }

File js.js:

$(function() { var index = 0; //vị trí ảnh var endImg = $("img.slide:last").attr("idx"); //ảnh cuối var interval; var timer = function () { interval = setInterval(function () { $("#next").click(); },5000); }; var changeImage = function(index) { //xây dựng hàm chuyển ảnh $("img.slide").hide(); $("img.slide").eq(index).fadeIn(500); $("button").removeClass("active"); $("button").eq(index).addClass("active"); clearInterval(interval); timer(); }; changeImage(index); //gọi đến hàm chuyển ảnh để tự động chuyển ảnh $("button").click(function() { //nhấn vào các nút tròn ở dưới ảnh để chuyển ảnh index = $(this).attr("idx"); changeImage(index); }); $("#next").click(function() { //nhấn vào mũi tên phải để chuyển ảnh phải if(++index > endImg) { //nếu chỉ số > chỉ số ảnh phải cùng index = 0; //thì thiết lập chỉ số ứng với ảnh trái cùng } changeImage(index); }); $("#prev").click(function() { //nhấn vào mũi tên trái để chuyển ảnh trái if(--index < 0) { //nếu chỉ số < 0 (tức là trước ảnh trái cùng) index = endImg; //thì thiết lập chỉ số ứng với ảnh phải cùng } changeImage(index); }); });

Download source code tại ĐÂY.

Từ khóa » Cách Sử Dụng Jquery Slider