javascript - 为什么幻灯片不起作用（不再）？
问题描述
正如您在我之前的问题中看到的那样，我已经设法让幻灯片正常工作。
我想放更多幻灯片，不幸的是它们不起作用，尽管我认为我使用了相同的代码/设计。原来的幻灯片也不再工作了:(。我现在有固定的幻灯片。
任何人都可以看到我应该怎么做才能让所有幻灯片重新工作吗？
这是代码：
HTML `
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div>
<img src="Img4.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img5.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img6.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div>
<img src="Img7.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img8.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img9.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div>
<img src="Img10.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img11.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img12.jpg" height="150px" width="75px">
</div>
</div>`
CSS
/* General settings */
body {
font-family: helvetica;
}
* {
font-size: 100%;
font-family: helvetica;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Starring ads */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowStarringAds {
margin: 80px auto;
position: absolute;
top: 20%;
left: 25%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
#SlideshowStarringAds {
height: 300px;
width: 300px;
}
#SlideshowStarringAds > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 1 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd1 {
margin: 80px auto;
position: absolute;
top: 20%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd1 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd1 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 2 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd2 {
margin: 80px auto;
position: absolute;
top: 34%;
right: 39%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd2 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd2 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 3 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd3 {
margin: 80px auto;
position: absolute;
top: 48%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd3 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd3 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
HTML头中的Javascript
<!-- Code Javascript belonging to starring ads -->
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<!-- End of Java script -->
可从OneDrive 下载的Javascript 文件
解决方案
好吧，在您的 javascript 中，您可以添加：
var slideshow1 = document.getElementById("SlideshowFeaturedAd1");
slideshow1.currentSlideIndex = 1;
showSlides(slideshow1.currentSlideIndex, slideshow1);
var slideshow2 = document.getElementById("SlideshowFeaturedAd2");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
var slideshow2 = document.getElementById("SlideshowFeaturedAd3");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
function plusSlides(n, slideshow) {
showSlides(slideshow.currentSlideIndex += n, slideshow);
}
function currentSlide(n, slideshow) {
showSlides(slideshow.currentSlideIndex = n, slideshow);
}
function showSlides(n, slideshow) {
var i;
var slides = slideshow.getElementsByClassName("mySlides");
var dots = slideshow.getElementsByClassName("dot");
if (n > slides.length) {slideshow.currentSlideIndex = 1}
if (n < 1) {slideshow.currentSlideIndex = 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[slideshow.currentSlideIndex-1].style.display = "block";
dots[slideshow.currentSlideIndex-1].className += " active";
}
然后在您的 CSS 中，您可以添加：
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
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: 13px;
width: 13px;
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}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
最后在您的 HTML 中，您可以添加：
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img4.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img5.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img6.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img7.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img8.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img9.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img10.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img11.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img12.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
此外，这个问题类似于：
因为，这个问题有这个问题的答案。
推荐阅读
- javascript - Vue 3 计算关键字（组合 API）
- swift - 带有 SpriteView 的项目运行但动画未在模拟器中显示
- ckeditor - 如何在 React Application 的 CKEditor5 中添加实时协作？
- pandas - 将数据框重塑为新的数据框
- typescript - 循环包含的数组
- javascript - 如何在单击 HTML 时将按钮的文本颜色更改为随机颜色？
- reactjs - 打开我的应用程序一次后，它会自动更新并打开自己的应用程序
- r - 运行单变量生存分析时出错
- javascript - 获取选中复选框的所有值？
- azure - 在部署期间读取 Azure ServiceBus 命名空间连接字符串