如何创建:引用幻灯片
- Vorige pagina Blok teller
- Volgende pagina Sluitbare lijstitem
学习如何使用 CSS 和 JavaScript 创建引用幻灯片。
引用幻灯片
创建引用幻灯片
第一步 - 添加 HTML:
一切反动派都是纸老虎!- 毛泽东
</div>改革是中国发展生产力的必由之路。- 邓小平
</div>中国共产党人的初心和使命,就是为中国人民谋幸福,为中华民族谋复兴。- 最高领袖
</div> ❮ <a class="next" onclick="plusSlides(1)">❯</a> </div> <!-- 点/项目符号/指示器 --> <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>第二步 - 添加 CSS:
设置幻灯片、按钮、圆点等的样式:
/* 幻灯片容器 */ .slideshow-container { position: relative; background: #f1f1f1f1; } /* 幻灯片 */ .mySlides { display: none; padding: 80px; text-align: center; } /* 下一个 & 上一个按钮 */ .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; } /* 将“下一个按钮”定位到右边 */ .next { position: absolute; right: 0; border-radius: 3px 0 0 3px; } /* 鼠标悬停时,添加带有一点透明的黑色背景色 */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); color: white; } /* 点/项目符号/指示器容器 */ .dot-container { text-align: center; padding: 20px; background: #ddd; } /* 点/项目符号/指示器 */ .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; } /* Voeg achtergrondkleur toe aan actieve punten/cirkels */ .active, .dot:hover { background-color: #717171; } /* Voeg schreefloze letterstijl toe aan alle citaten */ q {font-style: italic;} /* Voeg blauwe kleur toe aan de auteur */ .author {color: cornflowerblue;}derde stap - voeg JavaScript toe:
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"; }gerelateerde pagina's
Handleiding:Hoe te maken: Afbeeldingsdiavoorstelling
Handleiding:Hoe te maken: Lightbox
- Vorige pagina Blok teller
- Volgende pagina Sluitbare lijstitem
Hulpmiddelen
JavaScript en HTML DOM Referentiehandleiding
JavaScript Voorbeelden
JavaScript Test
JavaScript Geavanceerde handleiding
Sponsorlinks
De inhoud die CodeW3C.com biedt, is uitsluitend bedoeld voor training en testdoeleinden en garandeert niet de nauwkeurigheid van de inhoud. De risico's die voortvloeien uit het gebruik van de inhoud van deze site zijn niet verbonden met deze site. Alle rechten voorbehouden.
Over CodeW3C.com Hulp CodeW3C.com Gebruiksovereenkomst Privacy voorwaarden
![]()
![]()