我正在使用以下代码并尝试了许多其他代码来显示幻灯片中的图像。但都是徒劳..我的代码没有错误,但网页上没有显示单个图片..我的代码是:
<html>
<head>
<style>
body{
background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<img src = "Slide1.JPEG";/>
<img src = "Slide2.JPEG";/>
<img src = "Slide3.JPEG";/>
<img src = "Slide4.JPEG";/>
var interval = 4 * 20;
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;
var randomize = funtion() {
return ( Math.round(Math.random() * 3 - 1.5 ));
}
for(var i=0; i<imageCount; i++) {
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount) {
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade,interval * 100);
};
fade();
</script>
}
</body>
</html>
请指导我哪里出错。 感谢
答案 0 :(得分:1)
第一个错误:
Yor aur using file type in caps (.JPEG) it should be .jpeg / .jpg
第二个错误:
You forget to type the <script> tag at the starting of JavaScript code.
第三个错误:
You are using invalid function keyword (funtion)
var randomize = "funtion"() {
return ( Math.round(Math.random() * 3 - 1.5 ));
}
现在把这段代码放进去吧......
<html>
<head>
<style>
体{
background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<img src = "Slide1.jpg" />
<img src = "Slide2.jpg" />
<img src = "Slide3.jpg" />
<img src = "Slide4.jpg" />
<script>
var interval = 4 * 20;
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;
var randomize = function(){
return ( Math.round(Math.random() * 3 - 1.5 ));
}
for(var i=0; i<imageCount; i++) {
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount) {
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade,interval * 100);
};
fade();
</script>
</body>
</html>