我正在尝试使用下面的Javascript代码创建一个简单的图片幻灯片类型的东西,但是它正在做的是在网页中显示第一个图像以及其他所有内容,然后在5秒后清除页面并显示相同的图像,然后每隔5秒再次显示,除了它不再清除页面。
JavaScript:
var waiPics=new Array();
waiPics[0]='images/path.jpg';
waiPics[1]='images/gorse.jpg';
waiPics[2]='images/stream.jpg';
waiPics[3]='images/pines.jpg';
waiPics[4]='images/stump.jpg';
var time;
function timeUp() {
delete document.write();
nextPic();
}
function nextPic() {
var picNum=0;
if (picNum = waiPics.length) {
picNum=0;
}
else {
picNum++;
}
document.write('<img src="'+waiPics[picNum]+'" title="Waipahihi" alt="Waipahihi">');
time=setTimeout("timeUp()",5000);
}
HTML:
<script type="text/javascript">
<!-- Begin
nextPic();
// End -->
</script>
我对Javascript不是很有经验,所以提前感谢您的帮助。
答案 0 :(得分:0)
picNum将始终为零,因为它在函数内声明,并且每次调用函数时都将设置为零。即使你解决了这个问题,你的情况也是错误的:
if (picNum = waiPics.length) {
条件应该是:
if (picNum === waiPics.length) {
single =符号将长度分配给picNum,然后转换为布尔值。数组长度非零,因此它变为真值。然后每次都重置为零。
考虑使用JSLint检查代码是否存在错误并提出改进建议。它标志着这个问题:
"Expected a conditional expression and instead saw an assignment."
if (picNum = waiPics.length) {
事实上,在代码上使用JSLint并检查其建议后,我会使用更像这样的东西:
// New array creation syntax
var waiPics = ['images/path.jpg', 'images/gorse.jpg', 'images/stream.jpg', 'images/pines.jpg', 'images/stump.jpg'];
var picNum = 0; // Declare outside inner function so its value is preserved
var myDiv = document.getElementById("ssdiv"); // Get a div element to insert picture into
function nextPic() {
if (picNum === waiPics.length) { // Proper comparison
picNum = 0;
} else {
picNum += 1;
}
// Set picture into div element without evil document.write
myDiv.innerHTML = '<img src="' + waiPics[picNum] + '" title="Waipahihi" alt="Waipahihi">';
// No longer need timeUp; also don't use eval syntax
setTimeout(nextPic, 5000);
}
分配innerHTML避免了document.write的各种问题,也不需要刷新页面来更改幻灯片图像。另请注意其他评论。
答案 1 :(得分:0)
你需要在这里使用比较运算符('==')而不是分配('='):
//if (picNum = waiPics.length) {
if (picNum == waiPics.length) {
答案 2 :(得分:0)
看看这个例子......
http://jsfiddle.net/DaveAlger/eNxuJ/1/
让自己的幻灯片显示工作,将以下html复制并粘贴到任何文本文件中,并将其保存为slides.html
您可以在<img>
<div class="slideshow">
元素
享受!
<html>
<body>
<div class="slideshow">
<img src="http://davealger.info/i/1.jpg" />
<img src="http://davealger.info/i/2.bmp" />
<img src="http://davealger.info/i/3.png" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.slideshow img:gt(0)').hide();
setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000);
});
</script>
<style>
.slideshow { position:relative; }
.slideshow img { position:absolute; left:0; top:0; }
</style>
</body>
</html>