我有2个js功能，一个正在取消另一个

Question

我仔细查看了常见问题，但无法弄清楚导致这种情况的原因（在js中）。我想尽快获得一些东西，我暂时绕过了更好的动画，也可能是AJAX。

我要做的是将两个外部php页面包含到当前页面，一个是图库滑块，另一个是图库图像将出现的位置。这是我正在测试的页面的链接，所以你可以看到：

http://www.chrisjohndesigns.com/artwork-conventions.php

所以我使用的代码是简单的替换.innerHTML调用左右箭头调用下一个gallery div，然后该库中的缩略图调用下面显示的图片。左箭头和右箭头工作得很好，但只要点击任何缩略图（并且它们确实正常工作），左右箭头就会停止工作，并且你会卡在你选择的任何帧上。

以下是约定页面中的代码：

  <div id="field">
    <div id="gallery-callout">
      <div class="thumbs-slider-field-container" id="generic-slider">
        <div class="thumbs-slider-field" >
          <div id="prev">
            <img src="images/gallery-scroll-left.png" width="42" height="120" />
          </div>
          <div id="thumbs-slider">
            <img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
           <img src="images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
           <img src="images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/> 
           <img src="images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
           <img src="images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/> 
         </div>
         <div id="next">
           <img src="images/gallery-scroll-left.png" width="42" height="120"  onclick="callSlider('conventions2')" />
         </div>
        </div>
      </div>
    </div>
    <div class="rule">
  </div>
  <div class="entry" style="margin-bottom:0px;">
    <h4 style="color:#ffffff; margin:0px;">| <a href="artwork.php"> artwork </a> > <a href="artwork-conventions.php"> conventions</a></h4>
  </div>
  <div class="gallery-frame" id="generic">
    <h1 style="margin-top:5px; margin-bottom:10px;">CONVENTION ARTWORK</h1>
    <div class="artwork">
      <img src="images/artwork/portfolio-design/logos/atomic-heart/atomicH-heart_0910.png" />  
    </div>
    <div class="rule">
  </div>
  <p>Here you will find arwork produced for (or for sale at) the conventions that Atomic Glam attends. Our premier convention is Anime Weekend Atlanta held in Atlanta each September.<br />(Above: The Atomic Heart Logo of Atomic Glam)</p>

  <div style="display:none;">
    <?php include("artwork-gallery-digital.php"); ?>
    <?php include("sliders/slider-artwork-conventions.php"); ?>
  </div>
</div>

我正在使用的js：

<script type="text/javascript">
altViews = function(next_img) {
    document.getElementById("bigPicture").src = next_img;
}

function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML; 
}

function callSlider(slides) {
var target2 = document.getElementById('generic-slider');
var slides = document.getElementById(slides);
target2.innerHTML = slides.innerHTML; 
}

</script>

滑块的一个例子：

<div class="thumbs-slider-field" id="conventions1">
  <div id="prev">
    <img src="../images/gallery-scroll-left.png" width="42" height="120" />
  </div>
  <div id="thumbs-slider">
    <img src="../images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
    <img src="../images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
    <img src="../images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/> 
    <img src="../images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
    <img src="../images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/> 
  </div>
  <div id="next">
    <img src="../images/gallery-scroll-left.png" width="42" height="120"  onclick="callSlider('conventions2')" />
  </div>
</div>

为什么要取消另一个人的任何想法？