如何在同一頁面上運行2個類似的Javascript函數

Question

我有一個頁面，該頁面分為多個部分，其中兩個部分顯示圖像。 首先，我想在一個部分中顯示靜態圖像，而在另一部分中顯示旋轉圖像。 但是我現在想讓兩個部分都運行各自的評級圖像集，因此rotator1將顯示圖像1-6，rotator 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>

在此先感謝您的幫助。

彼得

Answer 1

您的代碼中有兩個主要問題。 首先，您要重寫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>

Answer 2

您如何使用此代碼取決於您:)這只是一個開始

  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>