如何在同一页面上运行2个类似的Javascript函数

I have a page that is split into sections and 2 of the sections show images. At first I wanted to show a static image in one section and a rotating image in the other which I have done. But I would now like to have both sections running their own set of rating images, so rotator1 would show images 1-6 and rotator 2 would show images 7-12. With some trial and error I can get it so that section 1 shows rotator 1 and then section 2 show rotator 2 and then goes back to section 1 and so forth.

我有一个分为几个部分的页面,其中两个部分显示图像。起初我想在一个部分中显示静态图像,在另一个部分中显示旋转图像。但我现在想要让两个部分都运行他们自己的评级图像集,因此rotator1将显示图像1-6,旋转器2将显示图像7-12。通过一些试验和错误,我可以得到它,以便第1部分显示旋转器1然后部分2显示旋转器2然后返回到部分1,依此类推。

I would like to get section 1 and section 2 to show their rotators at the same time.

我想让第1节和第2节同时显示它们的旋转器。

Below are the extracts of my code so far:

以下是我目前的代码摘录:

<div id="pay-slides">

<script type="text/javascript">
        window.onload = function(){
            window.displayImgCount = 0;
            function cycleImage(){
                if (displayImgCount !== 0) {
                    document.getElementById("img" + displayImgCount).style.display = "none";
                }
                displayImgCount = displayImgCount === 6 ? 1 : displayImgCount + 1;
                document.getElementById("img" + displayImgCount).style.display = "block";
                setTimeout(cycleImage, 5000);
            }
            cycleImage();
        }


    </script>

    <img id="img1" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="img2" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
    <img id="img3" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="img4" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
    <img id="img5" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="img6" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
</div>


<div id="adv-slides">

<script type="text/javascript">
        window.onload = function(){
            window.displayImgCount = 0;
            function cycleImage(){
                if (displayImgCount !== 0) {
                    document.getElementById("img" + displayImgCount).style.display = "none";
                }
                displayImgCount = displayImgCount === 12 ? 7 : displayImgCount + 1;
                document.getElementById("img" + displayImgCount).style.display = "block";
                setTimeout(cycleImage(), 5000);
            }
            cycleImage();
        }
    </script>

    <img id="img7" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="img8" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
    <img id="img9" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="img10" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
    <img id="img11" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="img12" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
</div>

Thanks in advance for any help.

在此先感谢您的帮助。

Peter.

2 个解决方案

#1

There is two major problems in you code. First, you are overriding the onload handler. You need to wrap your two functions in a parent function and then place it on the onload. Second, you are abusing global scope and clobber your state. This can be seen with the two uses of window.displayImgCount. Thirdly, keep your image ids separate for easier to debug code.

您的代码中存在两个主要问题。首先,您将覆盖onload处理程序。您需要将两个函数包装在父函数中,然后将其放在onload上。其次,你滥用全球范围并破坏你的国家。这可以通过window.displayImgCount的两种用法看出。第三,保持图像ID分离,以便更容易地调试代码。

<div id="pay-slides">

<script type="text/javascript">
        function initPaySlides(){
            //window.displayImgCount = 0;
            var displayImgCount = 0; //scoped to this function
            function cycleImage(){
                if (displayImgCount !== 0) {
                    document.getElementById("imgPay" + displayImgCount).style.display = "none";
                }
                displayImgCount = displayImgCount === 6 ? 1 : displayImgCount + 1;
                document.getElementById("imgPay" + displayImgCount).style.display = "block";
                setTimeout(cycleImage, 5000);
            }
            cycleImage();
        }


    </script>

    <img id="imgPay1" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="imgPay2" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
    <img id="imgPay3" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="imgPay4" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
    <img id="imgPay5" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="imgPay6" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
</div>


<div id="adv-slides">

<script type="text/javascript">
        function initAdvSlides(){
            //window.displayImgCount = 0;
            var displayImgCount = 0; //scoped to this function
            function cycleImage(){
                if (displayImgCount !== 0) {
                    document.getElementById("imgAdv" + displayImgCount).style.display = "none";
                }
                displayImgCount = displayImgCount === 6 ? 1 : displayImgCount + 1;
                document.getElementById("imgAdv" + displayImgCount).style.display = "block";
                setTimeout(cycleImage(), 5000);
            }
            cycleImage();
        }

        window.onload = function(){
          initPaySlides();
          initAdvSlides();
        }
    </script>

    <img id="imgAdv1" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="imgAdv2" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
    <img id="imgAdv3" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="imgAdv4" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
    <img id="imgAdv5" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="imgAdv6" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
</div>

#2

How you use this code is upto you :) this is a start

您如何使用此代码取决于您:)这是一个开始

        window.onload = function() {
          window.displayImgCount = 0;
          window.displayImgCount1 = 7;

          function cycleImage() {
            if (displayImgCount !== 0 && displayImgCount1 !== 0) {
              document.getElementById("img" + displayImgCount).style.display = "none";
              document.getElementById("img" + displayImgCount1).style.display = "none";
            }
            displayImgCount = displayImgCount === 6 ? 1 : displayImgCount + 1;
            displayImgCount1 = displayImgCount1 === 12 ? 1 : displayImgCount1 + 1
            console.log(displayImgCount);
            console.log(displayImgCount1);
            document.getElementById("img" + displayImgCount).style.display = "block";
            document.getElementById("img" + displayImgCount1).style.display = "block";
            setTimeout(cycleImage, 5000);
          }
          cycleImage();
        }

<div id="pay-slides" style="border:1px solid">
  <img id="img1" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_withAndrew.jpg" style="display: none">
  <img id="img2" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider1.jpg" style="display: none">
  <img id="img3" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider5.jpg" style="display: none">
  <img id="img4" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_YJWisdomWarriors.jpg" style="display: none">
  <img id="img5" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_prayer.jpg" style="display: none">
  <img id="img6" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider5.jpg" style="display: none">
</div>


<div id="adv-slides" style="border:1px solid">
  <img id="img7" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_withAndrew.jpg" style="display: none">
  <img id="img8" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider1.jpg" style="display: none">
  <img id="img9" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider5.jpg" style="display: none">
  <img id="img10" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_YJWisdomWarriors.jpg" style="display: none">
  <img id="img11" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_prayer.jpg" style="display: none">
  <img id="img12" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider5.jpg" style="display: none">
</div>