1. 首页
  2. 问答
  3. 如何在同一页面上运行2个类似的Javascript函数

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

2015-11-20 46 views
0

我有一个分为多个部分的页面，其中两个部分显示图像。起初，我想在一个部分展示静态图像，并在另一部分展示旋转图像，这些都是我所做的。但是现在我想让这两部分都运行自己的一组评级图像，因此rotator1会显示图像1-6，而rotator 2会显示图像7-12。随着一些试验和错误，我可以得到它，使第1部分显示旋转器1，然后第2部分显示旋转器2，然后返回到第1部分等等。如何在同一页面上运行2个类似的Javascript函数

我想让第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>

感谢。

Peter。

来源

2015-11-20 Peter D Lewis

回答

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>

来源

2015-11-20 12:24:15 pgreen2

0

你如何使用这个代码是高达你:)这是一个开始

 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>

来源

2015-11-20 12:52:15

相关问题

 相关问题