Question

我一直在尝试使用JavaScript制作幻灯片，但是如果我设置为div更改点击它可以工作但是当我在Interval上设置它时，我一直在遇到问题不起作用。

＆＃13;

    var numSlide = 0, currentSlide=0;
var slides = new Array;

function slideShow(){
img = document.getElementsByClassName("slideDesign");
    for (i=0; i<img.length; i++){

        slides[numSlide]=img[i];

        if (numSlide == 0){
            img[i].style.zIndex ="4";
        }
        else{
            img[i].style.display = "0";
        }
    img[i].onclick = slideCheck;
        numSlide++;

    }
}

function slideCheck(){
    slides[currentSlide].style.zIndex="0";
    currentSlide++;
    if(currentSlide >= numSlide){
       currentSlide = 0;
    }
     slides[currentSlide].style.zIndex= "4";
}


window.onload = slideShow;

＆＃13;

.slideDesign{
    width: 100%;
    height:400px;
max-height:800px;
position: absolute;
top:0;
transition: z-index 1s;
}
 #div1{
    background-color:black;
    }
 #div2{
    background-color:red;
    }
  #div3{
    background-color:blue;
    }
 #div4{
    background-color:green;
    }
 #div5{
    background-color:cyan;
    }

＆＃13;

<!DOCTYPE HTML5>
<html>

<head>
<link rel="stylesheet" href="style.css">    
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div id="slideShow">

<div id="div1" class="slideDesign"></div>
        <div id="div2" class="slideDesign"></div>
        <div id="div3" class="slideDesign"></div>
        <div id="div4" class="slideDesign"></div>
        <div id="div5" class="slideDesign"></div>


</div>    

</body>


</html>

＆＃13;

在slideShow函数结束之前的Javascript上，我可以通过单击div来调用slideCheck函数，并且div会更改但是如果我将该行更改为window.setInterval（＆＃34; slideCheck（）;＆＃ 34;，3000）我只是不工作，我无法弄清楚为什么。

Answer 1

你需要首先调用你的初始化函数（slideShow）和你的幻灯片更改函数（slideCheck）之后的间隔。

＆＃13;

   var numSlide = 0, currentSlide=0;
var slides = new Array;

function slideShow(){
img = document.getElementsByClassName("slideDesign");
    for (i=0; i<img.length; i++){

        slides[numSlide]=img[i];

        if (numSlide == 0){
            img[i].style.zIndex ="4";
        }
        else{
            img[i].style.display = "0";
        }
    img[i].onclick = slideCheck;
        numSlide++;

    }
}

function slideCheck(){
    slides[currentSlide].style.zIndex="0";
    currentSlide++;
    if(currentSlide >= numSlide){
       currentSlide = 0;
    }
     slides[currentSlide].style.zIndex= "4";
}
// Init your slide show
slideShow();
// Silde every 3 sec
window.setInterval(slideCheck, 3000);

＆＃13;

.slideDesign{
    width: 100%;
    height:400px;
max-height:800px;
position: absolute;
top:0;
transition: z-index 1s;
}
 #div1{
    background-color:black;
    }
 #div2{
    background-color:red;
    }
  #div3{
    background-color:blue;
    }
 #div4{
    background-color:green;
    }
 #div5{
    background-color:cyan;
    }

＆＃13;

<!DOCTYPE HTML5>
<html>

<head>
<link rel="stylesheet" href="style.css">    
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div id="slideShow">

<div id="div1" class="slideDesign"></div>
        <div id="div2" class="slideDesign"></div>
        <div id="div3" class="slideDesign"></div>
        <div id="div4" class="slideDesign"></div>
        <div id="div5" class="slideDesign"></div>


</div>    

</body>


</html>

＆＃13;

Answer 2

如果您不是真的想要自己构建滑动功能，可以考虑http://www.slidesjs.com/ 希望这会有所帮助。

一个简单的幻灯片与Javascript

2 个答案: