Tạo Image Slider - Dom - JavaScript
Có thể bạn quan tâm
Tạo các ảnh trượt đơn giản
Ví dụ sử dụng JavaScript tạo một Image Slider trượt các ảnh đơn giản, các ảnh chuyển đổi bằng cách bấm vào nút Ảnh trước Ảnh sau
Ảnh trước Ảnh sauCode HTML và JavaScript đầy đủ cho ví dụ trên
<div> <img id="slider" src="https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/earth.jpg"> <button onclick="prev()"> Ảnh trước </button> <button onclick="next()"> Ảnh sau </button> </div> <script> var images = [ "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/earth.jpg", "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/jupiter.jpg", "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/neptune.jpg" ]; var num = 0; function next() { var slider = document.getElementById("slider"); num++; if(num >= images.length) { num = 0; } slider.src = images[num]; } function prev() { var slider = document.getElementById("slider"); num--; if(num < 0) { num = images.length-1; } slider.src = images[num]; } </script>Giải thích mã Image Slider
<div> <img id="slider" src="https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/earth.jpg"> <button onclick="prev()"> Ảnh trước </button> <button onclick="next()"> Ảnh sau </button> </div>Đoạn mã HTML tạo ra box hiện thị ảnh, phần tử img hiện thị ảnh mặc định đầu tiên earth.jpg, tiếp theo là hai nút bấm. Nút Ảnh trước là phần tử button có bắt sự kiện onclick gọi đến hàm JavaScript pre(). Nút Ảnh sau là phần tử button có bắt sự kiện onclick gọi đến hàm JavaScript next().
<script> var images = [ "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/earth.jpg", "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/jupiter.jpg", "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/neptune.jpg" ]; var num = 0; function next() { var slider = document.getElementById("slider"); num++; if(num >= images.length) { num = 0; } slider.src = images[num]; } function prev() { var slider = document.getElementById("slider"); num--; if(num < 0) { num = images.length-1; } slider.src = images[num]; } </script>Các URL ảnh được trượt tập hợp vào một mảng tên images, ví dụ có ba ảnh, sử dụng biến num để biết chỉ số ảnh hiện tại đang hiện thị. Nếu người dùng bấm vào Ảnh tiếp chỉ số sẽ tăng thêm 1, nếu vượt qua số lượng ảnh có thì trở về 0.
Khai bảo mảng images như sau:
var images = [ "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/earth.jpg", "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/jupiter.jpg", "https://raw.githubusercontent.com/ichte/Planets-Android-Learning/master/neptune.jpg" ]; var num = 0;Hàm next() xây dựng như sau
function next() { //lấy phần tử img để hiện thị ảnh var slider = document.getElementById("slider"); //xử lý chỉ số tăng thêm 1 num++; if(num >= images.length) { num = 0; } //Thiết lập thuộc tính src của ảnh bằng ảnh mới slider.src = images[num]; } ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mớiTừ khóa » Chèn Hình ảnh Vào Js
-
Cách Thêm Hình ảnh Vào DOM Bằng JavaScript - Tech Wiki
-
Top 15 Chèn Hình ảnh Vào Js
-
Top 15 Chèn Hình Vào Js
-
10 Thư Viện Thao Tác Với ảnh Trong Javascript - Viblo
-
Thêm Hình ảnh Vào Tài Liệu HTML Bằng JavaScript - HelpEx
-
Tìm Hiều Cách Chèn Hình ảnh Vào đoạn Văn Khi Viết Blog
-
Chèn ảnh Trong HTML | Tìm ở đây
-
Cách Chèn Hình ảnh Vào Trang Web HTML
-
Hướng Dẫn Viết Chức Năng Thêm ,xóa ảnh Bằng Javascript (Jquery)
-
Thực Hành Upload File Bằng Javascript Có Code Mẫu
-
Chi Tiết Về Upload File Trong HTML / Javascript
-
ProcessingJS: Hướng Dẫn Cách Chèn Hình Vào Canvas | Chủ Đề Về ...
-
How To Add A Button To An Image - W3Schools
-
29 Importing Image - Sử Dụng Hình Ảnh Trong Ứng Dụng React