0

我查看了常见问题解答，但无法弄清楚是什么原因造成的（在 js 中）。我正试图让一些东西尽快上线，我暂时绕过更好的动画，可能还有 AJAX。

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

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

所以我使用的代码是简单的替换 .innerHTML 调用，其中左右箭头调用下一个画廊 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>

任何想法为什么一个抵消另一个？

4

0 回答 0