如何在网页中放置幻灯片？ 我使用了以下代码，但它不起作用

Question

I wanted to create a slideshow with 3 images inside a div . The slideshow will appear in a position at the top-left corner of the webpage. There are other divs and functionality in the web page as well.

I used this section of code inside the div for slideshow. I used mostly inline styles. The rest classes are just for positioning and size of the div.

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

 .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; float: left; text-align: center; }

 <div role="list" class="banner__list w-dyn-items"> <div style="background-image:url(/frontEnd/5a10aaa4d85f4b0001a5419a_2017-lamborghini-huracan-spyder-orange-exterior-front-angle-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <div style="background-image:url(/frontEnd/5a10aaa4d85f4b0001a541d8_2015-bentley-continental-gtc-red-car-hero-2-image-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <div style="background-image:url(/frontEnd/5abda7fc38a916291e1647d3_2018-jeep-wrangler-white-isolated-front-angle-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>

The dots are not even appearing. the first image is appearing only. whats wrong here?

Answer 1

Maybe those other classes you told about are overwriting some of your code.

I just added width and height properties to your banner__list div and it worked well. I also added some border colors for showing the images are really changing.

See:

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

 <div role="list" class="banner__list w-dyn-items" style="width: 300px; height: 300px;"> <div style="border: 3px solid red; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <div style="border: 3px solid green; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <div style="border: 3px solid blue; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides"> </div> <span class="dot" style="cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; float:left; text-align:center;" onclick="currentSlide(1)"></span> <span class="dot" style="cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; float:left; text-align:center;" onclick="currentSlide(2)"></span> <span class="dot" style="cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; float:left; text-align:center;" onclick="currentSlide(3)"></span> </div>

Answer 2

The slide show works, you just can't see the images because they're background images, and without styles or content the div s have a 0px width and height. Setting that shows the image correctly:

.banner__item {
  width:50px;
  height:50px;
}

As a side note, if you put those images in the HTML as actual img tags, you don't need to specify the width and height. This has the added benefit of allowing you to use the alt attribute, which improves accessibility.

Also, inline styles can cause headaches down the road. Applying the styles via classes can clean up the markup, and make things easier to maintain in the long run.

Along with inline styles, inline JS can cause headaches too. You can move the inline onClick handlers into an event listener, to get the markup cleaner still. In the snippet, I've added the listener:

window.addEventListener("click", currentSlide);

To account for the click listener, rather than passing in the index I looked it up:

function currentSlide(event) {
  const dots = document.getElementsByClassName("dot");
  const clickIndex = Array.from(dots).indexOf(event.target);
  showSlides(clickIndex);
}

I also modified the showSlides logic to just use 0 based arrays, rather than subtracting 1 from the integer passed in. Hopefully it all still works for you: :)

If you're wanting to center things, I usually reach for flexbox these days!

You can see it working on with how you have it in this codepen , or with recommended changes in the snippet below:

 showSlides(0); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(event) { const dots = document.getElementsByClassName("dot"); const clickIndex = Array.from(dots).indexOf(event.target); showSlides(clickIndex); } function showSlides(slideIndex) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); 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].style.display = "block"; dots[slideIndex].className += " active"; } window.addEventListener("click", currentSlide);

 .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; float: left; text-align: center; }.banner__list { width: 100px; }.banner__item { width: 100%; margin: 0 auto; text-align: center; }.banner__list { display: flex; flex-wrap: wrap; justify-content: center; }

 <div role="list" class="banner__list w-dyn-items"> <div role="listitem" class="banner__item w-dyn-item mySlides"> <img src="http://placehold.it/50/bada55" alt="green square" /> </div> <div role="listitem" class="banner__item w-dyn-item mySlides"> <img src="http://placehold.it/50/990000" alt="red square" /> </div> <div role="listitem" class="banner__item w-dyn-item mySlides"> <img src="http://placehold.it/50/000099" alt="blue square" /> </div> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div>

Answer 3

You can try Twitter's Bootstrap. It has a slideshow component.

Add this to your style:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

And here's the sample template:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="[IMAGE-1-SOURCE]" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="[IMAGE-2-SOURCE]" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="[IMAGE-3-SOURCE]" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>