幻灯片不工作：/

-2

<html> 
<head> 
<style> 
.mySlides { 
display:none; 
height:200px; 
width:800px; 
margin-left:auto; 
margin-right:auto; 
} 
</style> 
<head> 
<body> 
<script> 

var myIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    myIndex++; 
    if (myIndex > x.length) { myIndex = 1 } 
    x[myIndex - 1].style.display = "block"; 
    setTimeout(carousel, 2000); // Change image every 2 seconds 
    } 
</script> 
    <section id="images"> 
       <img id="yeah" class="mySlides" src="image1.jpg" /> 
       <img class="mySlides" src="image2.jpg" /> 
       <img class="mySlides" src="image3.jpg" /> 
      </section> 
</body> 
</html>

所以我不知道为什么这个自动幻灯片不工作时，它几乎逐字从w3schools复制，结果不显示任何东西。我一直试图找出它有什么问题，现在一天半左右，仍然没有运气，请帮助！幻灯片不工作：/

来源

2016-10-19 Durubie

请更新您的答案，期望它做什么，它实际上在做什么，以及您得到的任何错误。这是一个质量保证网站，而不是代码审查论坛，因此您必须提供明确的问题。 – Soviut

我编辑你的问题使用片段（替换你的'image1.jpg'等与公众可用的图像）。没有看到您的代码有问题 – Phil

它对我来说也很好。代码看起来很好，我在“运行代码片段”查看器中看到图像发生了变化。 – Paurian

我认为，这是不是因为之前的编辑工作，你的脚本标签是在你的HTML tags..hence脚本执行的功能，并提出了几个错误的，因为你的HTML没有完全加载中...

将您的脚本标签下方的HTML代码（在这种情况下）

看到片段

<html> 
 
    <style> 
 
    .mySlides { 
 
     display: none; 
 
     height: 200px; 
 
     width: 800px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
    } 
 
    </style> 
 

 
    <body> 
 
     <section id="images"> 
 
     <img id="yeah" class="mySlides" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRxjU7k88PhMjr8f7tCmwOhiaik22dtZYY773ZtWG4TSOLgspnOeIhpOHHa" /> 
 
     <img class="mySlides" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQiUk8V76AvsGFAkDEHVjnZID8iFgB8LF7mQMbVVDB8mLnxb81v1g" /> 
 
     </section> 
 
    </body> 
 

 
</html> 
 
<script> 
 
    var myIndex = 0; 
 
    carousel(); 
 

 
    function carousel() { 
 

 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
     x[i].style.display = "none"; 
 
    } 
 
    myIndex++; 
 
    console.log(x, myIndex); 
 
    if (myIndex > x.length) { 
 
     myIndex = 1 
 
    } 
 
    x[myIndex - 1].style.display = "block"; 
 
    setTimeout(carousel, 2000); // Change image every 2 seconds 
 
    } 
 
</script>

来源

2016-10-19 23:04:36 repzero

好的结果。小心那个未封闭的''也有（有两个开头的''标签） – Phil

回答编辑...坦克...：D .... – repzero

这是一个稍微不同的幻灯片实现，允许自动旋转图像。

var image_number = 0; 

function slideshow(num) { 
    var images = new Array("image1.jpg", "image2.jpg", "image3.png"); 
    var description = new Array("Title1", "Title2", "Title3"); 
    var image_length = images.length - 1; 
    image_number = image_number + num; 

    if (image_number > image_length) { 
     image_number = 0;   
    } 
    if (image_number < 0) { 
     image_number = image_length; 
    } 

    // Change <img> src and image description in DOM 
    document.getElementById("slideshow").src=images[image_number]; 
    document.getElementById("description").innerHTML = description[image_number]; 
    return false; 
} 

function auto_slideshow() { 
    setInterval(function(){ 
     slideshow(1); 

    }, 3000); 
}

来源

2016-10-20 01:54:37 123

幻灯片不工作：/

回答

相关问题