Trình chiếu W3.CSS
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ụ
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
Và hai nút để cuộn hình ảnh:
Ví dụ
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
Và thêm JavaScript để chọn hình ảnh:
Ví dụ
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex
+= n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if
(n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex =
x.length} ;
for (i = 0; i < 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. (Ả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, hãy 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), thì slideIndex được đặt thành 0.
Nếu slideIndex nhỏ hơn 1 thì nó được đặt thành số phần tử (x.length).
Trình chiếu tự động
Để hiển thị một slideshow tự động thậm chí còn đơn giản hơn.
Bạn chỉ cần một chút JavaScript khác biệt:
Ví dụ
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display
= "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel,
2000); // Change image every 2 seconds
}
Hãy tự mình thử »Trang trình bày HTML
Các slide 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
Lorem ipsum
Trang trình bày 2
Lorem ipsum
Trang trình bày 3
Lorem ipsum
Ví dụ
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the
moon in the 2020s</i></h1>
</div>
</div>
Hãy tự mình thử »Chú thích trình chiếu
Thêm văn bản chú thích cho mỗi slide hình ảnh với các lớp w3-display-* (topleft, topmiddle, topright, Bottomleft, Bottommiddle, Bottomright, left, right hoặc middle):
Ví dụ
<div class="w3-display-container mySlides">
<img src="img_snowtops.jpg"
style="width:100%">
<div class="w3-display-bottomleft w3-container
w3-padding-16 w3-black">
French Alps
</div>
</div>
Hãy tự mình thử »Chỉ báo trình chiếu
Ví dụ về cách sử dụng các nút để cho biết có bao nhiêu trang trình bày trong bản trình chiếu và người dùng hiện đang xem trang trình bày nào.
Ví dụ
<div class="w3-center">
<button class="w3-button" onclick="plusDivs(-1)">❮
Prev</button>
<button class="w3-button" onclick="plusDivs(1)">Next
❯</button>
<button class="w3-button demo" onclick="currentDiv(1)">1</button>
<button class="w3-button demo" onclick="currentDiv(2)">2</button>
<button class="w3-button demo" onclick="currentDiv(3)">3</button>
</div>
Hãy tự mình thử »Một vi dụ khac:
Ví dụ
<div class="w3-content w3-display-container">
<img class="mySlides"
src="img_nature.jpg">
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div
class="w3-center w3-display-bottommiddle" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">❮</div>
<div class="w3-right" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
</div>
</div>
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:
Ví dụ
<div class="w3-content" style="max-width:1200px">
<img class="mySlides"
src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_snow_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_mountains_wide.jpg" style="width:100%">
<div
class="w3-row-padding w3-section">
<div class="w3-col
s4">
<img class="demo w3-opacity" src="img_nature_wide.jpg"
style="width:100%" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo
w3-opacity" src="img_snow_wide.jpg"
style="width:100%;display:none"
onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo
w3-opacity" src="img_mountains_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(3)">
</div>
</div>
</div>
Hãy tự mình thử »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 theo các lớp khác nhau:
Ví dụ
<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg"
style="width:100%">
<img class="mySlides1" src="img_lights.jpg"
style="width:100%">
<img class="mySlides1" src="img_mountains.jpg"
style="width:100%">
<img class="mySlides1" src="img_forest.jpg"
style="width:100%">
</div>
<div class="w3-content">
<img
class="mySlides2" src="img_la.jpg" style="width:100%">
<img
class="mySlides2" src="img_ny.jpg" style="width:100%">
<img
class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>Hãy tự mình thử »Trang trình bày hoạt hì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 màn hình với các lớp w3-animate-*.
Ví dụ
<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides
w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg"> Hãy tự mình thử »Hoạt hình mờ dần
Lớp w3-animate-fading làm mờ dần một phần tử (mất khoảng 10 giây).
Ví dụ
<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides
w3-animate-fading" src="img_02.jpg">
<img class="mySlides
w3-animate-fading" src="img_03.jpg">
<img class="mySlides
w3-animate-fading" src="img_04.jpg"> Hãy tự mình thử »