我的第一张图片没有显示在网站的幻灯片中
[英]My first image doesn't show in my slideshow for website
问题描述
我已经在上下搜索了问题的解决方案-我是编码新手，并尝试使用javascript将幻灯片插入到我的网站中...一切正常，只是第一个图像出于任何原因都没有显示？ 我认为答案与我的css文件中的内容有关，但是我可能错了？ 当我单击页面底部的点时，幻灯片将运行并且图像启动，这只是问题的第一张图像。
任何帮助将不胜感激 ：）
var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls 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"; }
* {box-sizing:border-box} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Hide the images by default */ .mySlides { display:none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { 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); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* 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; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} }
<html> <head> <script src="slideshow-container.js"></script> <link href="css/styles.css" "slider.css" rel="stylesheet" type="text/css" media="screen" > <link href="css/slideshow-container.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="logo"> <li> <div id="links"> <ul> <li></li> <li></li> <li><a href="index.html">Welcome </a></li> <li><a href="about.html">About</a></li> <li><a href="gallery.html">Treatments</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <a href="maintest.html"><img src= "Images/untitled folder/My Choice Logo.jpg" width="350" class="fade"> </a></li> </div> <p> </p> <p> </p> <!-- Slideshow container --> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div id="slide1" class="mySlides fade"> <img src="Images/untitled folder/My Choice Logo.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="Images/untitled folder/Natural-Dog-Law-2-To-dojhgs,-energy- is-everything.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src= "Images/untitled folder/Treatment room.jpg" style="width:100%"> </div> <!-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>
2 个解决方案
解决方案1
2 2018-01-28 10:08:54
我已经解决了这个问题。 不知道这有多好的解决方法，但是要花一点时间来处理css的其他功能，以及对html和css的基本了解，因此我只为幻灯片一张创建了一个新文件，然后关闭了css中的命令，图像显示为块...因为它本身没有像通常那样将其放置在其他图像之上
新的HTML
<!-- Full-width images with number and caption text -->
<div id="slide1" class="mySlides fade" >
<img src="Images/untitled folder/MyChoiceLogo.jpg"
style="width:100%">
</div>
<div class="mySlides fade">
<img src="Images/untitled folder/Natural-Dog-Law-2-To-dojhgs-
energy-is-everything.jpg" style="width:100%">
</div>
新的CSS（已添加）
.mySlides {
display:none;
}
#slide1 {display:block}
感谢您的关注，我希望我的解决方案不会造成任何问题？ 希望这可以帮助任何像我一样挣扎的人，并且我对其他解决方法持开放态度：）再次感谢
解决方案2
0 2019-04-04 02:29:22
调用函数
currentSlide(1);
在您的js中，这将使第一张幻灯片在页面加载时可见。
我的图像直到我的幻灯片放映后才显示，然后当幻灯片再次开始时，它消失了
[英]My image doesn't show until after my slideshow then when slideshow starts again, it disappears
幻灯片的第一个元素不显示，按钮也不起作用
[英]First element of a slideshow doesn't show, and also the buttons doesn't work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.