2017-02-23 46 views
1

我用一些HTML CSS和Javascript来创建幻灯片。我在Youtube上发现了这个教程,它适用于我的使用。我在Stack Overflow上搜索了这个问题,显然有人使用了完全相同的代码。我的情况与该问题不同,所以这不是一个复制。但只有CSS执行不是Javascript。有没有人看到这个问题?为什么我的幻灯片显示Javascript不起作用?

这是我的HTML和CSS

<img id = "myPhoto" src="img1.JPG" alt= ""> 
<scipt src = "script.js"> </scipt> 

#myPhoto{ 
    margin: 20px 10%; 
    width: 80%; 
    height: 600px; 
} 

这里是我的javascript

var myImage = document.getElementById("myPhoto"); 

var imageArray = ["img1.JPG", "img2.JPG"]; 

var imageIndex = 0; 

function changeImage() { 
    myPhoto.setAttribute("src" , imageArray [ imageIndex]); 
    imageIndex++; 
    if (imageIndex >= imageArray.length) { 
    imageIndex = 0; 
    } 
} 

var intervalHandle = setInterval(changeImage, 2000); 

myPhoto.onclick = function() { 
    clearInterval(intervalHandle); 
} 
+0

你在浏览器控制台的任何错误? –

+0

“不工作”不是一个好的描述。您需要发布一个复制问题的示例,请参阅[*如何创建最小,完整且可验证的示例。*](http://stackoverflow.com/help/mcve) – RobG

+0

javascript效果未显示 – Kat

回答

0

它正常工作,是什么原因呢?

var myImage = document.getElementById("myPhoto"); 
 

 
var imageArray = ["http://placehold.it/150x150", "http://placehold.it/250x150"]; 
 

 
var imageIndex = 0; 
 

 
function changeImage() { 
 
    myPhoto.setAttribute("src" , imageArray [ imageIndex]); 
 
    imageIndex++; 
 
    if (imageIndex >= imageArray.length) { 
 
    imageIndex = 0; 
 
    } 
 
} 
 

 
var intervalHandle = setInterval(changeImage, 2000); 
 

 
myPhoto.onclick = function() { 
 
    clearInterval(intervalHandle); 
 
}
<img id = "myPhoto" src="http://placehold.it/250x150" alt= "">

+0

javascript效果没有显示。图像不“滑动”。我在哪里放置脚本?它应该在img标签之前吗? – Kat