Question

您好我对我要创建的图片库有疑问。我创建了一个缩略图查看器，所以当点击javascript然后在同一页面上将缩略图显示为更大的图像，但我需要添加一种方法，以便在关闭javascript时仍能看到较大的图像。这是我的代码（JavaScript的）

    function changeImage(el)
{
    evt.preventDefault(evt);
    var elem = document.getElementById("slide");
    elem.src = "Assets/images/big/"+el+".jpg";
}

（HTML）

     <div id="gallery">
    <img id="slide" src="Assets/images/big/0.jpg" onClick="next();">
</div>
    <div id="thumb">

        <ul class="thumbnail">

            <li><a href="Assets/images/big/0.jpg" onClick="changeImage('0');"><img id="thumb" src="Assets/images/thumbs/0.jpg" /></a></li>
            <li><a href="Assets/images/big/1.jpg" onClick="changeImage('1');"><img id="thumb" src="Assets/images/thumbs/1.jpg" /></a></li>
            <li><a href="Assets/images/big/2.jpg" onClick="changeImage('2');"><img id="thumb" src="Assets/images/thumbs/2.jpg" /></a></li>
            <li><a href="Assets/images/big/3.jpg" onClick="changeImage('3');"><img id="thumb" src="Assets/images/thumbs/3.jpg" /></a></li>
            <li><a href="Assets/images/big/4.jpg" onClick="changeImage('4');"><img id="thumb" src="Assets/images/thumbs/4.jpg" /></a></li>
            <li><a href="Assets/images/big/5.jpg" onClick="changeImage('5');"><img id="thumb" src="Assets/images/thumbs/5.jpg" /></a></li>
            <li><a href="Assets/images/big/6.jpg" onClick="changeImage('6');"><img id="thumb" src="Assets/images/thumbs/6.jpg" /></a></li>
            <li><a href="Assets/images/big/7.jpg" onClick="changeImage('7');"><img id="thumb" src="Assets/images/thumbs/7.jpg" /></a></li>

        </ul>
    </div><!-- thumb-->

现在我有了它，所以缩略图查看器正在工作但是在添加了javascript失败选项后，它不再在图库中显示图像，而是在单独的页面上，如果没有javascript，那将是最简单的方法解决这个问题所以当javascript工作时，缩略图图像显示在库中，当它不进入单独的页面时？非常感谢任何帮助

Answer 1

evt变量未在任何地方声明。您需要将事件对象传递给函数。或者，您可以将return false放在onclick属性的末尾。

Answer 2

删除

evt.preventDefault(evt);

并更改

<a href="Assets/images/big/i.jpg" onClick="changeImage('i');"><img id="thumb" src="Assets/images/thumbs/i.jpg" /></a>

HTML代码中的

（i从0到7）

<img class="thumb" src="Assets/images/thumbs/i.jpg" onclick="changeImage('i');" style="cursor:pointer;"/>

（<a>已删除，并添加了style属性以将鼠标光标更改为pointer，并将id更改为class - 具有多个元素相同的ID很糟糕。）

Answer 3

从事件处理程序返回false：

function changeImage(el) {
    var elem = document.getElementById("slide");
    elem.src = "Assets/images/big/" + el + ".jpg";
    return false;
}

并在html中添加return语句：

<ul class="thumbnail">

    <li><a href="Assets/images/big/0.jpg" onClick="return changeImage('0');"><img id="thumb" src="Assets/images/thumbs/0.jpg" /></a></li>
    <li><a href="Assets/images/big/1.jpg" onClick="return changeImage('1');"><img id="thumb" src="Assets/images/thumbs/1.jpg" /></a></li>
    <li><a href="Assets/images/big/2.jpg" onClick="return changeImage('2');"><img id="thumb" src="Assets/images/thumbs/2.jpg" /></a></li>
    <li><a href="Assets/images/big/3.jpg" onClick="return changeImage('3');"><img id="thumb" src="Assets/images/thumbs/3.jpg" /></a></li>
    <li><a href="Assets/images/big/4.jpg" onClick="return changeImage('4');"><img id="thumb" src="Assets/images/thumbs/4.jpg" /></a></li>
    <li><a href="Assets/images/big/5.jpg" onClick="return changeImage('5');"><img id="thumb" src="Assets/images/thumbs/5.jpg" /></a></li>
    <li><a href="Assets/images/big/6.jpg" onClick="return changeImage('6');"><img id="thumb" src="Assets/images/thumbs/6.jpg" /></a></li>
    <li><a href="Assets/images/big/7.jpg" onClick="return changeImage('7');"><img id="thumb" src="Assets/images/thumbs/7.jpg" /></a></li>

</ul>

Javascript图库禁止默认

3 个答案: