如何解决html 和 javascript 滑块在本地工作但在实时服务器中不起作用
我试图在我的网站中实现 HTML、CSS 和 Javascript 图像滑块。我只是从 w3schools 教程 link 复制和破坏代码。它在我的本地工作,但是当我将它上传到我的实时服务器时,滑块正在工作但滑块图像没有显示
这是我在下面实现的代码:
<div class="container">
<div class="section_header">
<h1>Administrator Features</h1>
<p> Readymade theme administrator features </p>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="./images/slider-img/dashboard.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/product.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/add-product.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/manage-slider.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/order.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/subscriber.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/message.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/user-controller.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/theme-settings.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="./images/slider-img/page-content.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">
<i class="bi bi-chevron-left"></i>
</a>
<a class="next" onclick="plusSlides(1)">
<i class="bi bi-chevron-right"></i>
</a>
</div>
<br>
<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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
<span class="dot" onclick="currentSlide(9)"></span>
<span class="dot" onclick="currentSlide(10)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
setInterval(function () { plusSlides(1) },10000);
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";
}
</script>
</div>
</section>
我的网站链接是 readymadetheme.com
如果您转到浏览器的控制台,您将看到 10 404 图像错误。我无法理解为什么会发生这种情况。你有解决这个问题的办法吗?
解决方法
您确定这些图片存在于您的实时版本中吗?
目前您的 mongoDb 图像显示正确 https://readymadetheme.com/images/mongodb-logo.png
但是您的滑块图像提供了 404 错误。这意味着网站无法找到它们。 https://readymadetheme.com/images/slider-img/dashboard.png
- 确保图像存在于实时版本中。
- 尝试将滑块图像移动到图像文件夹。检查它是否有效。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。