Cách thực hiện - Trình chiếu trích dẫn
Tìm hiểu cách tạo trình chiếu trích dẫn bằng CSS và JavaScript.
Trình chiếu trích dẫn
Tạo một bản trình chiếu báo giá
Bước 1) Thêm HTML:
Ví dụ
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width slides/quotes -->
<div class="mySlides">
<q>I love you the more in that I believe you had liked me for my own sake and
for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides">
<q>But man
is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div
class="mySlides">
<q>I have not failed. I've just found
10,000 ways that won't work.</q>
<p class="author">-
Thomas A. Edison</p>
</div>
<!-- Next/prev buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a
class="next" onclick="plusSlides(1)">❯</a>
</div>
<!--
Dots/bullets/indicators -->
<div class="dot-container">
<span
class="dot" onclick="currentSlide(1)"></span>
<span class="dot"
onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Bước 2) Thêm CSS:
Tạo kiểu cho các slide, nút, dấu chấm, v.v.:
Ví dụ
/* Slideshow container */
.slideshow-container {
position:
relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select:
none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover,
add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0,0,0,0.8);
color:
white;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* The
dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display:
inline-block;
transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover
{
background-color: #717171;
}
/* Add an italic font style to all
quotes */
q {font-style: italic;}
/* Add a blue color to the author
*/
.author {color: cornflowerblue;}
Bước 3) Thêm JavaScript:
Ví dụ
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var
i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n >
slides.length) {slideIndex = 1}
if (n < 1) {slideIndex
= slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className
= dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className
+= " active";
}
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem Cách thực hiện - Trình chiếu hình ảnh và Cách thực hiện - Hộp đèn .