Cách dùng JavaScript tạo các ảnh trượt Image Slider đơn giản

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,047
Reaction score
7,279
Cách dùng JavaScript tạo các ảnh trượt Image Slider đơ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.
Mã:
<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
Mã:
<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().

Mã:
<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:
Mã:
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:
Mã:
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];
}
Hàm prev() xây dựng như sau:
Mã:
function prev() {
        var slider = document.getElementById("slider");
        num--;
        if(num < 0) {
            num = images.length-1;
        }
        slider.src = images[num];
    }
Chúc các bạn thành công.


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom