W3.CSS

Trình chiếu

Văn bản phụ đề

Văn bản phụ đề

Văn bản phụ đề

Trình chiếu thủ công

Hiển thị trình chiếu thủ công với W3.CSS rất dễ dàng.

Chỉ cần tạo nhiều phần tử có cùng tên lớp:

Ví dụ

& lt; img class = “mySlides” src = “img_snowtops.jpg” & gt;
& lt; img class = “mySlides” src = “img_lights.jpg” & gt;
& lt; img class = “mySlides” src = “img_mountains.jpg” & gt;
& lt; img class = “mySlides” src = “img_forest.jpg” & gt;

Và hai nút để cuộn hình ảnh:

Ví dụ

& lt; button class = “w3-button w3-display-left” onclick = “plusDivs (-1)” & gt; & amp; # 10094; & lt; / button & gt;
& lt; button class = “w3-button w3 -display-right “onclick =” plusDivs (+1) “& gt; & amp; # 10095; & lt; / button & gt;

Và thêm JavaScript để chọn hình ảnh:

Ví dụ

var slideIndex = 1;
showDivs (slideIndex);

function plusDivs (n) {
showDivs (slideIndex
+ = n);
}

hàm showDivs (n) {
var i;
var x = document.getElementsByClassName (“mySlides”);
nếu
(n & gt; x.length) {slideIndex = 1}
if (n & lt; 1) {slideIndex =
x.length};
for (i = 0; i & lt; x.length; i ++) {
x [i] .style.display = “none”;
}
x [slideIndex-1] .style.display = “block”;
}

Hãy tự mình thử »

Giải thích về JavaScript

Đầu tiên, đặt slideIndex thành 1. (Hình ảnh đầu tiên)

Sau đó, gọi showDivs () để hiển thị hình ảnh đầu tiên.

Khi người dùng nhấp vào một trong các nút sẽ gọi plusDivs () .

Hàm plusDivs () trừ một hoặc thêm
một vào slideIndex.

Hàm showDiv () ẩn ( display = “none” )
tất cả các phần tử có tên lớp “mySlides” và hiển thị ( display = “block” )
phần tử có slideIndex đã cho.

Nếu slideIndex cao hơn số phần tử (x.length),
slideIndex được đặt thành 0.

Nếu slideIndex là nhỏ hơn 1, nó được đặt thành số phần tử
(x.length).

Trình chiếu tự động

Để hiển thị một trình chiếu tự động thậm chí còn đơn giản hơn.

Bạn chỉ cần khác một chút
JavaScript:

Ví dụ

var slideIndex = 0;
carousel ();

function carousel () {
var i;
var x = document.getElementsByClassName (“mySlides”);
for (i = 0; i & lt; x.length; i ++) {
x [i] .style.display
= “không”;
}
slideIndex ++;
if (slideIndex & gt; x.length) {slideIndex = 1}
x [slideIndex-1] .style.display = “block”;
setTimeout (băng chuyền,
2000); // Thay đổi hình ảnh 2 giây một lần
}

Hãy tự mình thử »

Trang trình bày HTML

Các trang trình bày không nhất thiết phải là hình ảnh.

Chúng có thể là bất kỳ nội dung HTML nào:

Trang trình bày 1

Trang trình bày 2

Trang trình bày 3

Ví dụ

& lt; div class = “mySlides” & gt;
& lt; div class = “w3-container w3-red” & gt;
& lt; h1 & gt; & lt; b & gt; Bạn có biết? & lt; / b & gt; & lt; / h1 & gt;
& lt; h1 & gt; & lt; i & gt; Chúng tôi dự định bán các chuyến đi đến
mặt trăng vào những năm 2020 & lt; / i & gt; & lt; / h1 & gt;
& lt; / div & gt;
& lt; / div & gt;

Hãy tự mình thử »

Chú thích trình chiếu

Snow, Na Uy

Đèn phía Bắc, Na Uy

Những ngọn núi tuyệt đẹp

Rừng nhiệt đới

Núi!

Thêm văn bản phụ đề cho mỗi trang trình bày hình ảnh bằng w3-display- *
các lớp (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright,
trái, phải hoặc giữa):

Ví dụ

& lt; div class = “w3-display-container mySlides” & gt;
& lt; img src = “img_snowtops.jpg”
style = “width: 100%” & gt;
& lt; div class = “w3-display-bottomleft w3-container
w3-padding-16 w3-black “& gt;
Alps ở Pháp
& lt; / div & gt;
& lt; / div & gt;

Hãy tự mình thử »

Chỉ báo trình chiếu

Ví dụ về việc sử dụng các nút để cho biết có bao nhiêu trang trình chiếu trong trình chiếu và người dùng hiện đang xem trang trình bày nào.

Một ví dụ khác:

❮

❯

Ví dụ

& lt; div class = “w3-content w3-display-container” & gt;
& lt; img class = “mySlides”
src = “img_nature.jpg” & gt;
& lt; img class = “mySlides” src = “img_snowtops.jpg” & gt;
& lt; img class = “mySlides” src = “img_mountains.jpg” & gt;
& lt; div
class = “w3-center w3-display-bottommiddle” style = “width: 100%” & gt;
& lt; div class = “w3-left” onclick = “plusDivs (-1)” & gt; & amp; # 10094; & lt; / div & gt;
& lt; div class = “w3-right” onclick = “plusDivs (1)” & gt; & amp; # 10095; & lt; / div & gt;
& lt; span class = “w3-huy hiệu demo w3-border” onclick = “currentDiv (1)” & gt; & lt; / span & gt;
& lt; span class = “w3-huy hiệu demo w3-border” onclick = “currentDiv (2)” & gt; & lt; / span & gt;
& lt; span class = “w3-huy hiệu demo w3-border” onclick = “currentDiv (3)” & gt; & lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

Hãy tự mình thử »

Hình ảnh làm chỉ báo

Một ví dụ về việc sử dụng hình ảnh làm chỉ báo:

Nhiều trình chiếu trên cùng một trang

Để vận hành nhiều trình chiếu trên một trang, bạn phải phân loại các thành viên của
mỗi nhóm trình chiếu với các lớp khác nhau:

Trang trình bày hoạt ảnh

Trượt hoặc làm mờ một phần tử từ trên cùng, dưới cùng, bên trái hoặc bên phải của màn hình với các lớp w3-animate- *.

Hoạt ảnh mờ dần

Lớp w3-animate-fade làm mờ dần một phần tử (mất khoảng 10 giây).