0
我试图创建一个幻灯片，其中每张幻灯片显示2000毫秒的时间间隔，但是，我无法获得第二张幻灯片显示...我已经包括我的Javascript和CSS下面任何帮助或简单的修改，你认为会有所帮助，将不胜感激。我相信这是一个简单的修补程序，但我只需要另一双眼睛，以帮助这个问题...Javascript幻灯片不工作
body{
background: white;
font-family: 'Raleway', sans-serif;
margin: 0 auto;
}
/* FOR SLIDES */
/*
essential styles:
these make the slideshow work
*/
#slides{
\t position: relative;
\t height: 100%;
\t padding: 0px;
\t list-style-type: none;
}
.slide{
\t position: absolute;
\t left: 0px;
\t top: 0px;
\t width: 100%;
\t height: 100%;
\t opacity: 0;
\t z-index: 1;
\t -webkit-transition: opacity 1s;
\t -moz-transition: opacity 1s;
\t -o-transition: opacity 1s;
\t transition: opacity 1s;
}
.showing{
\t opacity: 1;
\t z-index: 2;
}
/*
non-essential styles:
just for appearance; change whatever you want
*/
.slide{
\t font-size: 40px;
\t padding: 40px;
\t box-sizing: border-box;
\t background: #333;
\t color: #fff;
}
.slide:nth-of-type(1){
\t background: url(Slide0.png) no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.slide:nth-of-type(2){
\t background: url(Slide1.png) no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.slide:nth-of-type(3){
\t background: url(Slide2.png) no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.slide:nth-of-type(4){
\t background: url(Slide3.png) no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.slide:nth-of-type(5){
\t background: url(Slide4.png) no-repeat;
background-size: cover;
background-position: 50% 50%;
}<DOCTYPE! html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Widget1.0</title>
<!-- JS!!! -->
<script>
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';
}
var playing = true;
var pauseButton = document.getElementById('pause');
function pauseSlideshow(){
pauseButton.innerHTML = 'Play';
playing = false;
clearInterval(slideInterval);
}
function playSlideshow(){
pauseButton.innerHTML = 'Pause';
playing = true;
slideInterval = setInterval(nextSlide,2000);
}
pauseButton.onclick = function(){
if(playing){ pauseSlideshow(); }
else{ playSlideshow(); }
};
</script>
</head>
<body>
<ul id="slides">
<li class="slide showing" id="slide1">Slide 1</li>
<li class="slide" id="slide2">Slide 2</li>
<li class="slide" id="slide3">Slide 3</li>
<li class="slide" id="slide4">Slide 4</li>
<li class="slide" id="slide5">Slide 5</li>
</ul>
<button class="controls" id="pause">Pause</button>
</body>
</html>