个人中心
gpt4 book ai didi

javascript - 循环播放图像幻灯片 (html/js)

转载 作者：行者123 更新时间：2023-11-28 02:22:01 24 4
gpt4 key购买 nike

大家好，我正在尝试制作一个在我的网站上无限循环的图像幻灯片。我已经研究了几个网站，但仍然无法获得正确的代码，因为仅显示 html 代码中的图像集并且图像没有变化....请问我做错了什么？这是幻灯片中涉及的我的代码:

JavaScript:

    var imageArray = ["media/Chicken Itza.jpg", "media/Christ the Redeemer.jpg", "media/Colosseum.jpg", "media/Great Wall of China.jpg", "media/Machu Picchu.jpg", "media/Petra.jpg", "media/TajMahal.jpeg"]
    var imageIndex = 0; 
    var mainImage = document.getElementById('mainImage')
    mainImage.src = imageArray[0]

    function slideshow() {
        mainImage.innerHTML(imageArray[imageIndex]);
        imageIndex = imageIndex++;
        if (imageIndex > imageArray.length - 1) {
            imageIndex = 0;
        }
    }

html:

<body onload="slideshow()">
<img id="mainImage"class="mainslides animate-fading" src="media/Chicken Itza.jpg">
</body>

至于我这里的完整代码是:HTML:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author(s)" content="Nathan , Jacob , Tee Kiat">
    <meta name="description" content="FED project by Nathan Jacob and Tee Kiat">
    <title>FED assignment (7 wonders of the world)</title>
    <link rel="stylesheet" href="7 wonders.css">
    <script src="index.js"></script>
</head>
<body onload="slideshow()">

    <div id="hmenu" class="hamburger_menu">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a>
        <a href="javascript:void(0)" id="main_gwow">The 7 wonders of the world<br>=====================</a>
        <a href="#" id="gwow1">Great Wall of China</a><br><!--China-->
        <a href="#" id="gwow2">Petra</a><br><!--Jordan-->
        <a href="#" id="gwow3">Christ the Redeemer</a><br><!--Brazil-->
        <a href="#" id="gwow4">Machu Picchu</a><br><!--Peru-->
        <a href="#" id="gwow5">Chicken Itza</a><br><!--Mexico-->
        <a href="#" id="gwow6">Colosseum</a><br><!--Italy-->
        <a href="#" id="gwow7">Taj Mahal</a><!--India-->
    </div>
        <span id="hamspan" style="font-size:30px;cursor:pointer;" onclick="openNav()">&#9776</span>
        <h1 id="title">The 7 wonders of the World</h1><br>

    <section id="generalimg">
        <img id="mainImage"class="mainslides animate-fading" src="media/Chicken Itza.jpg">
    </section>    


</body>
</html>

JavaScript:

var imageArray = ["media/Chicken Itza.jpg", "media/Christ the Redeemer.jpg", "media/Colosseum.jpg", "media/Great Wall of China.jpg", "media/Machu Picchu.jpg", "media/Petra.jpg", "media/TajMahal.jpeg"]
var imageIndex = 0;
var mainImage = document.getElementById('mainImage')
mainImage.src = imageArray[0]

function slideshow() {
    mainImage.innerHTML(imageArray[imageIndex]);
    imageIndex = imageIndex++;
    if (imageIndex > imageArray.length - 1) {
        imageIndex = 0;
    }
    setTimeout(slideshow, 2000); //this line is added
}


function openNav() {
    document.getElementById("hmenu").style.width = "250px";
}

function closeNav() {
    document.getElementById("hmenu").style.width = "0";
}

CSS:

body {
    font-family: "Lato", sans-serif;
}

.mainslides {
   width:450px;
   height:500px; 

}
.animate-fading {
         animation: fading 5s infinite
}

@keyframes fading {
    0% {
        opacity: 0
    }   

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
}
figcaption{
    font-style:italic;
}

/*DO NOT TOUCH*/
h1,#hmenu,section{
    text-align:center;
}
.hamburger_menu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.hamburger_menu a { 
    padding-top:5px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

#gwow1:hover, #gwow2:hover, #gwow3:hover, #gwow4:hover, #gwow5:hover, #gwow6:hover, #gwow7:hover,#main_gwow {
    color: #f1f1f1;
}

.hamburger_menu .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 100px;
}

@media screen and (max-height: 450px) {
    .hamburger_menu {
        padding-top: 15px;
    }

        .hamburger_menu a {
            font-size: 18px;
        }
}

#hamspan {
    float:left;
}

最佳答案

I have researched several websites and is still unable to get the code right as only the image set in the html code is showing and there is no change in the image ....may I ask what I am doing wrong?

只是您根本没有再次调用 slideshow 方法!

在方法的末尾添加以下行以每 2 秒更改一次图像。

setTimeout( slideshow, 2000 ); //this line is added

你还需要设置图像的 src 属性而不是它的 innerHTML

mainImage.src = imageArray[imageIndex];

或

mainImage.setAttribute( "src", imageArray[imageIndex] );

即

function slideshow() {
    mainImage.src = imageArray[imageIndex]; //this line is changed as well
    imageIndex = imageIndex++;
    if (imageIndex > imageArray.length - 1) {
        imageIndex = 0;
    }
    setTimeout( slideshow, 2000 ); //this line is added
}

关于javascript - 循环播放图像幻灯片 (html/js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48148479/

24 4 0
文章推荐： javascript - highstock 图中同系列线的颜色不同？
文章推荐： jquery - 复选框列表，按字母顺序排列在自上而下的列中
文章推荐： html - 如何在 HTML 中使用 typescript 以表格格式插入数组元素
文章推荐： html - 标签很长时标签重叠文本框 - css
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com