Question

我正在尝试用下面的 Javascript 代码创建一个简单的图像幻灯片显示类型, 但是它正在做的是展示网页中的第一张图像, 并用其他一切, 然后在5秒后清理页面, 并显示 same 图像, 然后每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没有经验所以先谢谢你的帮助

Answer 1

picNum 总是为零, 因为它在函数中被声明为零, 每次调用函数时都会设定为零。即使您修补了, 您的状态也是错误的 :

if (picNum = waiPics.length) {

条件应当是:

if (picNum === waiPics.length) {

单个 = 符号将长度指定为 picNum, 然后转换为布林。数组长度为非零, 因而变成真实值。然后每次重置为零。

考虑使用“http://www.jslint.com” rel=“nofollow”>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);
}

指派内部HTML 避免了文档. write 的多种问题, 也不要求您的页面刷新以更改幻灯片图像。另请注意其他注释。

Answer 2

您需要使用比较操作员( = ), 而不是指定( = ) 在此 :

//if (picNum = waiPics.length) {
if (picNum == waiPics.length) {

Answer 3

看看这个例子...

http://jsfiddle.net/DaveAlger/eNxuJ/1/

使您自己的幻灯片显示工作、复制和粘贴以下 html 到任何文本文件并保存为 slides.html

您可以在元素中添加任何数量。。

享受吧!

<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>

友情链接