Hướng dẫn click ảnh javascript

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

Hướng dẫn click ảnh javascript

Code HTML và JavaScript đầy đủ cho ví dụ trên

Hướng dẫn click ảnh javascript

Giải thích mã Image Slider

Hướng dẫn click ảnh javascript

Đ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().

 

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];
} 

Trong bài này chúng ta sẽ tìm hiểu sự kiện click trong Javascript, đây là sự kiện xảy ra khi nhấp chuột vào một đối tượng HTML nào đó. Sự kiện này áp dụng cho mọi thẻ HTML.

Hướng dẫn click ảnh javascript

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Click là một sự kiện rất quan trọng trong các ngôn ngữ lập trình hướng sự kiện. Khi người dùng muốn thao tác với những chức năng trên phần mềm thì phải sử dụng chuột để click. Lúc này ta sẽ bắt sự kiện đó và trả kết quả về cho user.

1. Khi nào sử dụng sự kiện click trong Javascript?

Ta cần bắt sự kiện click khi muốn xây dựng một chức năng nào đó, và chức năng này sẽ xảy ra khi người dùng click vào một đối tượng nào đó.

Ví dụ bạn xây dựng chức năng hiển thị danh sách sinh viên, bạn xây dựng một button Hiển Thị Sinh Viên, nếu người dùng click vào button này thì sẽ gọi Ajax để lấy danh sách và trả kết quả về cho người dùng.

Bài viết này được đăng tại [free tuts .net]

2. Cú pháp sự kiện click trong Javascript

Chúng ta có hai cách để bắt sự kiện click trong js, thứ nhất là gắn trực tiếp trên thẻ HTML, và thứ hai là sử dụng thông qua thuộc tính onclick của các đối tượng DOM.

Cách 1: Gắn trực tiếp trên thẻ HTML

Trong đó element là thẻ HTML bạn cần bắt sự kiện click, còn event_function() chính là hàm sẽ được thực thi khi sự kiện click xảy ra.

Ví dụ: Hiển thị thông báo khi người dùng click vào một button.


Cách 2: Gắn sự kiện click vào đối tượng DOM

Mình sẽ đặt id cho thẻ input trên, sau đó sử dụng các hàm hỗ trợ DOM để gọi đến thẻ này, sau đó gắn một hàm vào thuộc tính click.


3. Gán nhiều hành động cho sự kiện click cùng lúc

Đối với sự kiện click trong js, bạn có thể gán nhiều hành động vào nhiều thời điểm khác nhau. Tuy nhiên, nó chỉ nhận hành động mà bạn gán cuối cùng thôi nhé.

Ví dụ: Gọi đến hai thông báo khi xảy ra sự kiện click.


Trong ví dụ trên thì chỉ có hàm thứ hai là được gọi.

Nếu bạn muốn gọi cả hai hàm tách biệt thì tốt nhất định nghĩa hai hàm riêng, sau đó gắn chung một lần vào sự kiện click.


Trên là nhữn chia sẻ về sự kiện click trong javascript. Nếu có vướng mắc gì thì hãy để lại bình luận. Hay nếu bài viết có sai sót thì hãy đóng góp giúp mình nhé.