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

时间：2015-11-20 12:12:42

标签： javascript

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

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

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

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

提前感谢您的帮助。

彼得。

2 个答案:

答案 0 :(得分：0)

您的代码中存在两个主要问题。首先，您将覆盖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>

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
        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();
        }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题