Question

对于http://jsfiddle.net/7HWxu/2/我试图用四个按钮覆盖图像循环，以便在单击一个图像时图像会发生变化。但是，点击“1”时图像不会改变。任何帮助非常感谢。谢谢，

汤姆

Answer 1

问题在于此代码：

<div class="fadein">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg"></div>
<div style="position:absolute;">
<!-- ImageReady Slices (1.jpg) -->
<table id="Table_01" width="251" height="61" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/images/1_01.jpg" width="68" height="61" alt=""
    onclick="document.getElementById('fadein').src='/1.jpg'">
</td>
<td>
<img src="/images/1_02.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_03.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_04.jpg" width="61" height="61" alt="">
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>

您没有任何 id 为“fadein”的元素。（的类的div元素没有有意义的src属性。）

我注意到您在页面上有jQuery - 而不是使用内联事件处理程序，我建议您使用bind或delegate来管理链接：

// Your original code
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
          $('.fadein :first-child').
                             fadeOut().
                             next('img').
                             fadeIn().
                             end().
                             appendTo('.fadein');
     }, 6500);

    // Addenda
    $("#Table_01").delegate("img", "click", function(e) {
            // Show and hide images here based on what e.target is.
     });

});

Answer 2

HTML中没有“id”值为“fadein”的元素，因此函数会返回null。包含<div>的外部包含类“fadein”，但不包含“id”。您可以更改<div>我猜：

<div class='fadein' id='fadein'>

getelementbyid不工作

2 个答案: