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

问题描述 投票：0回答：5

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

我认为问题出在 Javascript 代码中，因为这个项目的 HTML 和 CSS 部分应该做的所有事情都已经完成了。然而，图像并没有改变。

我对 Javascript 有点菜鸟，所以请指出任何内容，即使它是显而易见的。先谢谢了！！

这是我的代码：

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

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();
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;
}
<!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>

javascript css html
5个回答
1
投票

使用可以使用jssor slider插件来创建响应式轮播。 参考https://github.com/jssor/slider

0
投票

我建议使用 Bootstrap 来制作一个漂亮且响应灵敏的轮播。

0
投票

您还将定义的 (

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

0
投票
nextImage()

函数仅在加载脚本时触发一次。 在您创建的函数的第二行中，

startPlayback()
，让它在 
startPlayback()
延迟后再次调用自身，以便创建一个无休止的循环。 我还会在没有 
slideInterval
的情况下触发该函数的第一行，并使用 
setTimeout
第一次调用您的 
startPlayback()
函数触发器。
例如：

setTimeout




    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
试试这个





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



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







参考：
使用 JavaScript 创建轮播/幻灯片
    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.