Question

我从谷歌搜索中获得了一个小的javascript。我使用这个脚本在我运行的小网页中“滚动”jpeg图像。 [[[免责声明：我是javascript的超级n00b，但我愿意学习并寻找答案。很多搜索和阅读教程后，我仍然无法得到正确的答案/解决方案。所以如果你能指出我正确的方向，或者帮助我找出解决方案，我将非常感激。]]]

当我想运行这些脚本的两个实例时，就会出现小打嗝：一个是图像（JPEG），另一个是“横幅”（也是JPEG）链接到网站的其他部分。当我尝试将两个脚本放在同一页面中时，两个脚本都不会“滚动”图像。

关于我搞砸了哪里的任何想法？

我在帖子/消息的末尾包含了脚本的代码。

非常感谢您的时间和帮助！ =）非常感谢！

我在Stackoverflow中找到了这个问题，但我似乎无法理解解决方案：run 2 identical javascripts on the same page

Javascript代码:(（我要运行两次的那个））

<p>
    <script type="text/javascript">
    theimage = new Array();
    theimage[0]=["http://myWEBSITE.com/image01.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[1]=["http://myWEBSITE.com/image02.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[2]=["http://myWEBSITE.com/image03.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[3]=["http://myWEBSITE.com/image04.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[4]=["http://myWEBSITE.com/image05.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[5]=["http://myWEBSITE.com/image06.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[6]=["http://myWEBSITE.com/image07.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[7]=["http://myWEBSITE.com/image08.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[8]=["http://myWEBSITE.com/image09.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    theimage[9]=["http://myWEBSITE.com/image10.jpg", "http://www.myWEBSITE.com", "myWEBSITE.com"];
    playspeed=1500;// 
    //###########################################
    window.onload=function(){
        preloadSlide();
        SetSlide(0);
        PlaySlide();
    }
    //###########################################
    function SetSlide(num) {
        i=num%theimage.length;
        if(i<0)i=theimage.length-1;
        document.images.imgslide.src=theimage[i][0];
        document.getElementById('slidebox').innerHTML=theimage[i][2];
    }
    //###########################################
    function PlaySlide() {
        if (!window.playing) {
            PlayingSlide(i+1);
            if(document.slideshow.play){
                document.slideshow.play.value="   Stop   ";
            }
        }
        else {
            playing=clearTimeout(playing);
            if(document.slideshow.play){
                document.slideshow.play.value="   Play   ";
            }
        }
        if(document.images.imgPlay){
            setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
            imgStop=document.images.imgPlay.src
        }
    }
    //###########################################
    function PlayingSlide(num) {
        playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
    }
    //###########################################
    function preloadSlide() {
        for(k=0;k<theimage.length;k++) {
            theimage[k][0]=new Image().src=theimage[k][0];
        }
    }
    </script>

    <!-- slide show HTML -->
    <form name="slideshow">
    <table border="1" cellpadding="2" cellspacing="0">
    <tr>
        <td align="center">
        <a href="http://myWEBSITE.com/#" onmouseover="this.href=theimage[i][1];return false">
        <script type="text/javascript">
            document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
        </script>
        </a>

        </td>
    </tr>
    <tr>
        <td align="center"><div id="slidebox"></div></td>
    </tr>
    <tr>
        <td align="center">
            <input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
            <input type="button" name="play" value="   Play   " onclick="PlaySlide();" title="Autoplay">

            <input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
        </td>
    </tr>
    </table>
    </form>
    <!-- end of slide show HTML -->
    </p>

Answer 1

该脚本仅设计为每页运行一个旋转图像元素。至少有几个点在第二次运行它会打破第一次运行。例如，theimage是全局声明的。

首先运行：

theimage = new Array(); // creates window.theimage variable as new array
theimage[0] = [...];
theimage[n] = [...];

第二次运行

theimage = new Array(); // creates a new array and assigns to window.theimage, first array gone 
theimage[0] = [...];
theimage[n] = [...];

window.onload是一种类似的情况 - 在第二次运行脚本时，将为onload创建的函数被覆盖。

您可以重写脚本，以便通过运行函数内的所有内容将全局变量隔离到本地范围。您可以创建一个匿名函数并立即调用它，如

   <script type="text/javascript">
    (function() {
        var theimage = new Array();
        ... // everything else
    })();
   </script>

那样theImage只存在于该函数内而不是window对象中，并且当您第二次运行该脚本时，不会对该变量产生干扰。

对于onload函数，我将脚本标记移动到页面的末尾，并将函数调用移到脚本的末尾（仍然在anon函数内）。有人可能会对文件中可能没有准备好的事情感到不满，但我认为你不可能在这方面遇到任何问题。

仅使用html替换图片代码的document.write。将src硬编码为列表中的第一项。您还必须为其提供唯一的id值。

将document.images.imgslide引用替换为document.getElementById('myUniqueimgslideId')。

您必须将本地对象替换为globabl window/document引用并相应地调整脚本。

从

开始

<script type="text/javascript">
    (function() {

        var SlideShowController = {
            playing : false,
            slideshow : {}
        };

    ....

这将为您提供一个本地SlideShowController实例来管理每个幻灯片。

setTimeout调用当前正在运行全局范围内的指令。您可以通过在脚本中为函数调用创建闭包来解决此问题。

playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);

变为

playing=setTimeout(function(){ 
    PlayingSlide(i+1); 
    SetSlide(i+1); 
}, playspeed);

这将调用本地范围中定义的函数的版本。

如果您从未与他们合作过，那么封闭进入了非常深的水域，但它们对于js非常有用，所以我建议您阅读它们。我认为这应该是预期的方式。

我认为这涵盖了您的大部分问题。如果您遇到麻烦，请发布更新。

在同一页面中运行重复的Javascripts

1 个答案: