Question

我在同一页面上显示自定义图像动画滑块的多个实例。

我使用以下标记以非全局方式编码，因此前一个按钮不起作用。

请提供指导 - 参考编辑 - 如何实施，以便编码是全球性的。

此外，重要的是，前一个按钮不适用于最底部的两个滑块。顶部滑块功能齐全。

然而，最后两个是错误的。

这是我的代码：

  <script type = "text/javascript">
      function displayImage(image) {
          document.getElementById("img").src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;

         clearInterval(timer);
         displayImage(images[x]);
         timer = setInterval( displayThisImage, 5000 );
      }

      function displayThisImage( ) {
          x = (x == images.length - 1) ? 0 : x + 1; 
          displayImage(images[x]);
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
         clearInterval(timer);
         displayImage(images[x]);
         timer = setInterval( displayThisImage, 5000 );
      }

      function startTimer() {
         timer =    setInterval( displayThisImage, 5000 );
      }


      var images = [], x = -1;
      var timer ;
      images[0] = "http://rastastation.com/images/carousel_anthonyb2.png";
      images[1] = "http://rastastation.com/images/carousel_capleton2.png";
      images[2] = "http://rastastation.com/images/carousel_sizzla2.png";
      images[3] = "http://rastastation.com/images/carousel_earlsixteen.png";
      images[4] = "http://rastastation.com/images/carousel_norrisreid.png";
      images[5] = "http://rastastation.com/images/carousel_yamibolo2.png";
      images[6] = "http://rastastation.com/images/carousel_fantanmojah2.png";
      images[7] = "http://rastastation.com/images/carousel_natural_black2.png";
      images[8] = "http://rastastation.com/images/carousel_admiraltibet.png";
      images[9] = "http://rastastation.com/images/carousel_luciano.png"; 
</script>


</script>

  <script type = "text/javascript">
      function displayImageA(image) {
          document.getElementById("imgA").src = image;
      }

      function displayNextImageA() {
          xA = (xA == imagesA.length - 1) ? 0 : xA + 1;

         clearInterval(timerA);
         displayImageA(imagesA[xA]);
         timerA = setInterval( displayThisImageA, 9000 );
      }

      function displayThisImageA( ) {
          xA = (xA == imagesA.length - 1) ? 0 : xA + 1; 
          displayImageA(images[x]);
      }

      function displayPreviousImageA() {
          xA = (xA <= 0) ? imagesA.length - 1 : xA - 1;
         clearInterval(timerA);
         displayImageA(imageA[x]);
         timerA = setInterval( displayThisImageA, 9000 );
      }

      function startTimerA() {
         timerA =   setInterval( displayThisImageA, 9000 );
      }


      var imagesA = [], xA = -1;
      var timerA ;
      imagesA[0] = "http://rastastation.com/images/carousel_anthonyb2.png";
      imagesA[1] = "http://rastastation.com/images/carousel_capleton2.png";
      imagesA[2] = "http://rastastation.com/images/carousel_sizzla2.png";
      imagesA[3] = "http://rastastation.com/images/carousel_earlsixteen.png";
      imagesA[4] = "http://rastastation.com/images/carousel_norrisreid.png";
      imagesA[5] = "http://rastastation.com/images/carousel_yamibolo2.png";
      imagesA[6] = "http://rastastation.com/images/carousel_fantanmojah2.png";
      imagesA[7] = "http://rastastation.com/images/carousel_natura.png";
      imagesA[8] = "http://rastastation.com/images/carousel_admiraltibet.png";
      imagesA[9] = "http://rastastation.com/images/carousel_luciano.png"; 
</script>

</script>

  <script type = "text/javascript">
      function displayImageB(image) {
          document.getElementById("imgB").src = image;
      }

      function displayNextImageB() {
          xB = (xB == imagesB.length - 1) ? 0 : xB + 1;

         clearInterval(timerB);
         displayImageB(imagesB[x]);
         timerB = setInterval( displayThisImageB, 9000 );
      }

      function displayThisImageB( ) {
          xB = (xB == imagesB.length - 1) ? 0 : xB + 1; 
          displayImageB(imagesB[x]);
      }

      function displayPreviousImageB() {
          xB = (xB <= 0) ? imagesB.length - 1 : xB - 1;
         clearInterval(timerB);
         displayImageB(imageB[x]);
         timerB = setInterval( displayThisImageB, 9000 );
      }

      function startTimerB() {
         timerB =   setInterval( displayThisImageB, 9000 );
      }


      var imagesB = [], xB = -1;
      var timerB ;
      imagesB[0] = "http://rastastation.com/images/carousel_anthonyb2.png";
      imagesB[1] = "http://rastastation.com/images/carousel_capleton2.png";
      imagesB[2] = "http://rastastation.com/images/carousel_sizzla2.png";
      imagesB[3] = "http://rastastation.com/images/carousel_earlsixteen.png";
      imagesB[4] = "http://rastastation.com/images/carousel_norrisreid.png";
      imagesB[5] = "http://rastastation.com/images/carousel_yamibolo2.png";
      imagesB[6] = "http://rastastation.com/images/carousel_fantanmojah2.png";
      imagesB[7] = "http://rastastation.com/images/carousel_natural.png";
      imagesB[8] = "http://rastastation.com/images/carousel_admiraltibet.png";
      imagesB[9] = "http://rastastation.com/images/carousel_luciano.png"; 
</script>

HTML

<section id="mainRadioContent2" name="mainRadioContent2">
<div id="featuredArtistsArea">
<div id="rgStateSLIDER">
<img id="img" src="images/carousel_start.png">
<div id="containerSliderControls">
<div class="buttonPrevious" onClick="displayPreviousImage()"></div>
<div class="buttonNext" onClick="displayNextImage()"></div>
</div>
</div>
<div id="audiostream_textBorderRed"></div>
<div id="audiostream_textBorder"></div>
<div id="audiostream_textBorderGreen"></div>
<div id="audiostream_text">
<span class="reggae_text"> We feature conceptually oriented classic riddims, roots,    culture, and dub Reggae. Give thanks as Haile Selassie Guideth. Check the ReggaeStation&trade; Reggae Video Network, streaming HD Rastafarian Reggae Music Videos and Live Reggae Stage Show Performance Videos on <a href="http://reggaevideos.reggaestation.net/" target="_self">ReggaeVideos.ReggaeStation.net</a>. We strive to offer the best Reggae Music Selection available on the Internet.  The mission of Reggae Station Media Network is to promulgate growth of Rastafarian Centered Education.   The Organizational Framework of our NGO is to promote Socially Progressive and Righteous Reggae Music Worldwide to the masses of Reggae Fans of all demographics. The Reggae Songs on ReggaeStation&trade; Network are hard to find classics and specifically attained from Reggae Music Collectors, so so please buy Reggae legally online at <a href="http://www.apple.com/euro/itunes/charts/top10reggaealbums.html" target="_self">iTunes,</a> <a href="http://www.amazon.com/b?ie=UTF8&node=195366011" target="_blank">Amazon.com</a>, or on <a href="http://www.ebreggae.com/Home.asp" target="_self">EBReggae.com</a> and support these artists by attending their shows. IRITICAL - Jah Rastafari.</span></div>
</div>

<div id="featuredArtistsArea">
<div id="rgStateSLIDER">
<img id="imgA" src="images/carousel_start.png">
<div id="containerSliderControls">
<div class="buttonPrevious" onClick="displayPreviousImageA()"></div>
<div class="buttonNext" onClick="displayNextImageA()"></div>
</div>
</div>
<div id="audiostream_textBorderRed"></div>
<div id="audiostream_textBorder"></div>
<div id="audiostream_textBorderGreen"></div>
<div id="audiostream_text">
<span class="reggae_text"> We feature conceptually oriented classic riddims, roots, culture, and dub Reggae. Give thanks as Haile Selassie Guideth. Check the ReggaeStation&trade; Reggae Video Network, streaming HD Rastafarian Reggae Music Videos and Live Reggae Stage Show Performance Videos on <a href="http://reggaevideos.reggaestation.net/" target="_self">ReggaeVideos.ReggaeStation.net</a>. We strive to offer the best Reggae Music Selection available on the Internet.  The mission of Reggae Station Media Network is to promulgate growth of Rastafarian Centered Education.   The Organizational Framework of our NGO is to promote Socially Progressive and Righteous Reggae Music Worldwide to the masses of Reggae Fans of all demographics. The Reggae Songs on ReggaeStation&trade; Network are hard to find classics and specifically attained from Reggae Music Collectors, so so please buy Reggae legally online at <a href="http://www.apple.com/euro/itunes/charts/top10reggaealbums.html" target="_self">iTunes,</a> <a href="http://www.amazon.com/b?ie=UTF8&node=195366011" target="_blank">Amazon.com</a>, or on <a href="http://www.ebreggae.com/Home.asp" target="_self">EBReggae.com</a> and support these artists by attending their shows. IRITICAL - Jah Rastafari.</span></div>
</div>

<div id="featuredArtistsArea">
<div id="rgStateSLIDER">
<img id="imgB" src="images/carousel_start.png">
<div id="containerSliderControls">
<div class="buttonPrevious" onClick="displayPreviousImageB()"></div>
<div class="buttonNext" onClick="displayNextImageB()"></div>
</div>
</div>
<div id="audiostream_textBorderRed"></div>
<div id="audiostream_textBorder"></div>
<div id="audiostream_textBorderGreen"></div>
<div id="audiostream_text">
<span class="reggae_text"> We feature conceptually oriented classic riddims, roots, culture, and dub Reggae. Give thanks as Haile Selassie Guideth. Check the ReggaeStation&trade; Reggae Video Network, streaming HD Rastafarian Reggae Music Videos and Live Reggae Stage Show Performance Videos on <a href="http://reggaevideos.reggaestation.net/" target="_self">ReggaeVideos.ReggaeStation.net</a>. We strive to offer the best Reggae Music Selection available on the Internet.  The mission of Reggae Station Media Network is to promulgate growth of Rastafarian Centered Education.   The Organizational Framework of our NGO is to promote Socially Progressive and Righteous Reggae Music Worldwide to the masses of Reggae Fans of all demographics. The Reggae Songs on ReggaeStation&trade; Network are hard to find classics and specifically attained from Reggae Music Collectors, so so please buy Reggae legally online at <a href="http://www.apple.com/euro/itunes/charts/top10reggaealbums.html" target="_self">iTunes,</a> <a href="http://www.amazon.com/b?ie=UTF8&node=195366011" target="_blank">Amazon.com</a>, or on <a href="http://www.ebreggae.com/Home.asp" target="_self">EBReggae.com</a> and support these artists by attending their shows. IRITICAL - Jah Rastafari.</span></div>
</div>

<div id="reggaeStationLink"><a href="http://reggaestation.net/audiostream_one.html"><img src="images/RASTA_Reggae_Radio.png" alt="rasta radio" width="549" height="79" border="0" /></a></div>
</section>

我该怎么做？

同一页面上JS图像滑块的多个实例

0 个答案: