幻灯片显示不能正常工作

slideshow is not working properly

本文关键字：工作 常工作 显示 不能 幻灯片      更新时间：2023-09-26

我正在建立一个网站，在headerdiv上我想添加一个幻灯片。我的代码取出并显示了第一张图像，但是滑块不起作用，我把所有的图像放在这里的images文件夹中。html文件是

<html>
<head>
    <title>slideshow</title>
</head>
<body>
<img scr ="image/slider1.jpg" id = "img"/>
<script language="javascript" type="text/javascript" scr="slideshow.js"></script>
</body>

和我的。js文件是这个

var myImage = doucoment.getElementById("img");
var ImageArray = ["slider1.jpg", "slider2.jpg", "slider3.jpg"];
ImageIndex = 0;
function changeImage() {
    img.setAttribute("src", ImageArray[ImageIndex]);
    ImageIndex++;
    if (ImageIndex >= ImageArray.length){
        ImageIndex = 0;
    }
}
var ImageHandle = setInterval(changeImage, 3000);

您的HTML和JavaScript中有错字 .

scr到src

和

doucoment to document

下面是修改后的代码段。

  var myImage = document.getElementById("img");
         //   ^^^^^^^ typo here.
  
    var ImageArray = ["https://www.google.com.pk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif", "http://reservations.life/css/images/bg-01.jpg"];
    ImageIndex = 0;
    function changeImage(){
    img.setAttribute("src", ImageArray[ImageIndex]);
    ImageIndex++;
    if(ImageIndex >= ImageArray.length){
    ImageIndex = 0;
  }
}
    var ImageHandle = setInterval(changeImage,3000);
img{
  width:400px;
  height:200px;
}
//   ||| typo here.
<img src ="https://www.google.com.pk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif" id = "img"/>

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}
#slides {
    position: relative;
    height: 300px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.showing {
    opacity: 1;
    z-index: 2;
}
<ul id="slides">
    <li class="slide showing">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
    <li class="slide">Slide 4</li>
    <li class="slide">Slide 5</li>
</ul>

HTML:

scr ="image/slider1.jpg"
scr="slideshow.js"

将'scr'转换为'src'

JS: 

doucoment.getElementById("img")

把'document'变成'document'

相关文章：