如何使用HTML5，CSS和Javascript制作图像轮播？

时间：2017-07-28 16:10:54

标签： javascript html css html5

当我运行文件时，我只能看到第一张图片，但在slideInterval时间之后它不会改变。

我认为问题出在Javascript代码中，因为该项目的HTML和CSS部分应该做的所有事情都已完成。但是，图像不会改变。

我对Javascript有点不高兴所以请指出任何事情，即使它很明显。先谢谢!!

这是我的代码：

首先是Javascript，然后是CSS，然后是HTML：

＆＃13;
＆＃13; 
var slideInterval = 3500;

function getFigures() {
    return document.getElementById("carousel").getElementsByTagName("figure");
}

function nextImage() {
    var pointer;
    //var figures = getFigures;
    var figures = getFigures();
    for(var i = 0; i < figures.length; i++){
        if(figures[i].className == "visible")
            figures[i].className = "";
            pointer = i; 
    }

    if (++pointer == figures.length) {
        pointer = 0;
    }

    figures[pointer].className = 'visible';
    setTimeout(nextImage(), slideInterval);
}

function startPlayback() {    
    setTimeout(nextImage(), slideInterval);
}

startPlayback();
＆＃13; 
section#carousel > figure > img {
    display: none;
    margin: 0px auto;
}

section#carousel > figure.visible > img {
    display: block;    
    position: relative;
    overflow: hidden;  
}

section#carousel > figure > figcaption {
    display: none;
}

section#carousel > figure.visible > figcaption {
display: block;    
text-align: center;  
font-weight: bold;
font-size: 1.5em;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Contoso News</title>
        <link rel="stylesheet" href="../styles/style.css" />
    </head>
    <body>
    <section id="carousel">
        <figure class="visible">
            <img src="../media/efficient_cars.png" alt="Efficient Cars">
            <figcaption>Efficient Cars To Be Used In The Future</figcaption>
        </figure>
        <figure>
            <img src="../media/natural_disasters.png" alt="Natural Disasters">
            <figcaption>Many Natural Disasters Are Thought To Happen More Often</figcaption>
        </figure>
        <figure>
            <img src="../media/health_records.png" alt="Health Records">
            <figcaption>Many Doctors are Moving to Digital Health Records This Year</figcaption>
        </figure>
    </section>
    <script type="text/javascript" src="../js/carousel_script.js"></script>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

使用可以使用jssor滑块插件来创建响应式轮播。 请参阅https://www.jssor.com/

答案 1 :(得分：0)

您的startPlayback()函数仅在加载脚本时触发一次。在您创建的函数的第二行startPlayback()中，让它在slideInterval延迟后再次调用自身，以便创建一个无限循环。我还会在没有setTimeout的情况下触发该功能的第一行，并使用startPlayback()首次调用setTimeout函数触发器。

例如：

function startPlayback() {
     nextImage();
     window.setTimeout(startPlayback(), slideInterval);
}
window.setTimeout(startPlayback(), slideInterval);

答案 2 :(得分：0)

我建议使用Bootstrap来获得漂亮且响应性的旋转木马。

答案 3 :(得分：0)

您还将您定义的function（nextImage()）传递给setTimeout()方法，而不是包含匿名函数的变量，因此请在该参数中包含“（）” 。如果您使用W3Schools示例作为参考，它们将以变量的形式传递匿名函数，这就是它们不包含“（）”的原因。由于您正在传递函数，请添加“（）”。在您的情况下，变量nextImage未定义，但函数nextImage()已定义。

答案 4 :(得分：0)

尝试一下 

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function changeSlide(n) {
    showSlides(slideIndex += n);
}

// Indicator controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

// Change image every 3 seconds
setInterval("showSlides(++slideIndex)", 3000);

function showSlides(n) {
    let i, slides, dots;
    slides = document.getElementsByClassName("carousel-item");
    dots = document.getElementsByClassName("indicator");
    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}

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out;
}

.carousel-item img {
  width: 100%;
  height: auto;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-next, .carousel-control-prev {
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
  width: 15%;
  color: #fff;
  font-size: 2em;
  text-decoration: none;
  text-align: center;
  opacity: .5;
  transition: opacity .15s ease;
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators .indicator {
  box-sizing: content-box;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 35px;
  height: 5px;
  margin-right: 3px;
  margin-left: 3px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity .6s ease;
}

.active {
  background-color: red !important;
  color: red;
}

/* Fading animation */
.fade {
  -webkit-animation: 1.5s fade;
  animation: 1.5s fade;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 1}
}
<div class="carousel">
  <!-- Slides -->
  <div class="carousel-inner">
    <div class="carousel-item fade">
      <img src="https://parrot-tutorial.com/images/nature_autumn.jpg" alt="Nature Autumn">
      <div class="carousel-caption">
        <h2>First slide</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>

    <div class="carousel-item fade">
      <img src="https://parrot-tutorial.com/images/nature_autumn_red.jpg" alt="Nature Red">
      <div class="carousel-caption">
        <h2>Second slide</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>

    <div class="carousel-item fade">
      <img src="https://parrot-tutorial.com/images/nature_lake.jpg" alt="Mountain">
      <div class="carousel-caption">
        <h2>Third slide</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>

  <!-- Previous and Next controls -->
  <div class="carousel-control-prev" onclick="changeSlide(-1)">&#10094;</div>
  <div class="carousel-control-next" onclick="changeSlide(1)">&#10095;</div>

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li class="indicator active" onclick="currentSlide(1)"></li>
    <li class="indicator" onclick="currentSlide(2)"></li>
    <li class="indicator" onclick="currentSlide(3)"></li>
  </ol>
</div>

参考： Create a Carousel / Slideshow using JavaScript

相关问题
最新问题