Question

我有一个幻灯片播放，其脚本与How to make slideshow auto-play?相同，但似乎无法使我的工作正常。有什么建议吗？此幻灯片演示确实有一个父元素，这可能是原因，还是CSS？

按要求提供我的链接：我确信这是正确的文件路径，因为我的控件仍然有效。

<!--get jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--project slideshow scripts-->
<script src="profile-javascript/project-slideshow.js">
</script>
<script src="profile-javascript/project-slideshow2.js">
</script>

HTML：

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";
}

setInterval(function() {
  plusSlides(1);
}, 1000);

/*courosel section starts*/

.slideshow-container {
  max-width: 1000px;
  height: 7.5em;
  position: relative;
  margin: 7.5px auto;
}

.mySlides,
.mySlides2 {
  display: none;
}

.project-text {
  color: ;
  display: flex;
  position: ;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-family: 'Inknut Antiqua', serif;
}

.slideshow-img {
  width: 17.4rem;
  height: 10.5rem;
  border-radius: 5px;
  box-shadow: 2.5px 2.5px 2px rgba(0, 0, 0, 0.7);
  -webkit-transition: display 1s;
  transition: 1s;
}

.slide-hover-p {
  display: none;
}

.slideshow-img:hover+.slide-hover-p {
  display: block;
}

.fade-car {
  -moz-animation-name: fade-car;
  -webkit-animation-name: fade-car;
  -moz-animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
}

.project-text a,
a:visited,
{}

.previous,
.nexxt {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: ;
  font-weight: bold;
  font-size: 28px;
  transition: 0.85s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.nexxt {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.previous:hover,
.nexxt:hover {
  cursor: pointer;
}

#p-others:hover,
#n-others:hover {
  background-color: white;
  color: #00004d;
}

#p-coding:hover,
#n-coding:hover {
  background-color: #00004d;
  color: white;
}


/*courosel media queries*/

@-webkit-keyframes fade-car {
  from {
    opacity: 0.4
  }
  to {
    opacity: 1
  }
}

@keyframes fade-car {
  from {
    opacity: 0.4
  }
  to {
    opacity: 1
  }
}

@media only screen and (max-width: 300px) {
  .previous,
  .nexxt,
  .text {
    font-size: 11px
  }
}

<!--slider starts-->
<div class="slideshow-container">
  <div class="mySlides fade-car">
    <div class="project-text">
      <img src="images/colorado_view2.jpg" class="slideshow-img img-fluid" alt="global6" />
      <p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
    </div>
  </div>

  <div class="mySlides fade-car">
    <div class="project-text">
      <img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
      <p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
    </div>
  </div>

  <div class="mySlides fade-car">
    <div class="project-text">
      <img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
      <p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
    </div>
  </div>
  <a id="p-others" class="previous" onclick="plusSlides(-1)">&#10094;</a>
  <a id="n-others" class="nexxt" onclick="plusSlides(1)">&#10095;</a>
</div>
<!--slideshow ends-->

Answer 1

通过将缺少的元素添加到“点”类中，使其在@RachelGallen的帮助下工作。谢谢！另外，对不起，我是stackoverflow编辑的菜鸟。我不知道为什么代码会这样显示。

<span class="dot" onclick="currentSlide(1)"></span>                             <span class="dot" onclick="currentSlide(2)"></span>                             <span class="dot" onclick="currentSlide(3)"></span>

幻灯片自动播放

1 个答案: