[英]How to create an automatic slideshow with buttons
我的HTML中有一個自動幻燈片,它使用JavaScript在定義的時間后更改為下一個圖像。 這是我的代碼:
<div class="slideshow-container">
<div class="mySlides fade">
<img alt="Gaming Computer" src="../Pictures/1.jpg" href="../Pages/Systems.html" style="width:100%">
<div> <h2 class="photoText"><span>Gaming Ready Computers.</span></h2> </div>
</div>
<div class="mySlides fade">
<img alt="Text" src="../Pictures/2.jpeg" style="width:100%">
<h2 class="photoText2"><span>The newest, most innovative, and truly powerful GPUs, <br/>   ready to push your next PC to the next level.</span></h2>
</div>
<div class="mySlides fade">
<img alt="Text" src="../Pictures/3.png" style="width:100%">
<h2 class="photoText3"><span>The Ultimate Gaming Experience.</span></h2>
</div>
<div class="mySlides fade">
<img alt="Text" src="../Pictures/4.png" style="width:100%">
<h2 class="photoText4"><span>Industry Quality Editing.</span></h2>
</div>
<div class="mySlides fade">
<img alt="Text" src="../Pictures/5.jpg" style="width:100%">
<h2 class="photoText5"><span>Learn to create anything you can imagine.</span></h2>
</div>
<div class="dotContainer" style="text-align:center;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 6000);
}
</script>
我想在圖像的右側和左側添加兩個按鈕,單擊這些按鈕,將更改為下一張或上一張圖片。 我一直在尋找幾天沒找到任何能解決我問題的東西。 我在這里看過另外一篇帖子,其中有人問我自己的問題,但唯一的答案是使用網站上的CSS太長,不能過濾掉幻燈片的代碼。
我是JavaScript的新手,所以我真的不明白,所以任何幫助都非常感謝!
我想你期待這樣。
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
檢查你的圖像
https://jsfiddle.net/sg649vy3/
更新的小提琴https://jsfiddle.net/sg649vy3/4/
如果您想在中間放置這些箭頭,請添加此樣式
.fa-chevron-left,.fa-chevron-right{
margin-top:180%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.