Trình chiếu JavaScript với các chức năng

• Có Thể 14, 2024

Trong các bài viết trước, chúng tôi đã tạo và thực hiện một số điều chỉnh tốt trên một trình chiếu JavaScript rất đơn giản. Trình chiếu này hoàn toàn có chức năng và thậm chí hiển thị thứ gì đó phù hợp cho những người không có JavaScript, nhưng tôi muốn có hình thu nhỏ của hình ảnh mà tôi hiện đang hiển thị trông khác với các hình thu nhỏ khác. Tôi đã giải quyết bằng cách sử dụng id CSS có tên "current" để làm cho hình ảnh bán trong suốt và thêm một viền đỏ mỏng cho hình thu nhỏ được chọn. Trong bài viết cuối cùng của tôi, tôi đã nhận được hành vi này cho hình thu nhỏ được chọn ban đầu nhưng khi tôi chọn hình thu nhỏ mới, hình thu nhỏ mới không thay đổi và hình thu nhỏ ban đầu giữ kiểu dáng đã chọn.

Trong phiên bản trước của trình chiếu của tôi, khi người dùng nhấp vào hình thu nhỏ, các hình ảnh lớn được liên kết sẽ được hiển thị. Những gì tôi muốn nó làm là thay đổi hình ảnh lớn, đặt hình thu nhỏ của hình ảnh được chọn trước đó trở lại bình thường và làm cho hình thu nhỏ này hiển thị với kiểu đặc biệt cho hình ảnh được chọn. Vì bây giờ tôi đang làm nhiều việc khi hình thu nhỏ được nhấp vào, tôi đã chuyển từ đặt tất cả mã của mình vào thuộc tính onClick của img gắn thẻ để sử dụng một chức năng. Các hàm JavaScript thường đi trong cái đầu phần của HTML để chúng sẽ được tải và sẵn sàng khi phần thân của trang được tải. Chúng có thể được chèn trực tiếp vào giữa kịch bản thẻ hoặc đặt và một tập tin và bao gồm. Đối với các chương trình ngắn hoặc khi tôi đang tích cực mã hóa, tôi thấy việc đặt mã trực tiếp vào trang như tôi đã làm ở đây dễ dàng hơn.

Tôi có thể đã sử dụng một chức năng cho mỗi hình thu nhỏ nhưng vì tất cả những thay đổi từ hình thu nhỏ thành hình thu nhỏ là tên của hình ảnh và id của hình thu nhỏ (và tôi đã sử dụng tên hình ảnh cho id), tôi đã viết một chức năng duy nhất id làm đối số và sử dụng nó để tạo tên hình ảnh phù hợp bằng cách thêm ".jpg" vào nó. Tôi gọi chức năng của tôi màn hình hiển thị.

chức năng hiển thịLund (id) {
// thay đổi hình ảnh lớn
imageName = id + ".jpg";
document.getEuityById ("LargeImage"). src = imageName;
// đặt kiểu của hình thu nhỏ trước đó trở về mặc định
document.getEuityById ("hiện tại"). id = oldID;
// ghi chú id trước khi chúng ta thay đổi nó
oldID = id
// đánh dấu hình thu nhỏ là hiện tại với kiểu hiện tại
document.getEuityById (id) .id = "current";
}

Để chức năng này hoạt động lần đầu tiên, tôi cũng phải đưa ra định nghĩa ban đầu cho cũID, biến tôi đang sử dụng để ghi nhớ id gốc của hình thu nhỏ hiện được chọn. Tất cả mã này nằm trong phần đầu của trang web, để nó được tải trước khi tải trang.

Cuối cùng, tôi đã thay đổi HTML cho hình thu nhỏ để gọi chức năng của mình. HTML cho trình chiếu của tôi bây giờ trông như thế này:











Bạn có thể xem một ví dụ hoạt động của mã này ở đây.

Video HướNg DẫN: 04 - Dùng Javascript xử lý sự kiện và kiểm tra đăng nhập (Có Thể 2024).