Question

我把这个网站的代码放在一起，并且图库正常运行测试网站...但是一旦它被上传到我的网站主机 - 点击图片不再改变，一个人正在查看。我不确定自己做错了什么。任何帮助将不胜感激。

您可以在此处看到它：http://swampyankeebbq.com/about.html

<head>中的HTML：

<link rel="stylesheet" media="all" type="text/css" href="photo_click/photo_click.css" />
<script src="photo_click/click_gallery.js" type="text/javascript"></script>

HTML：

<div id="gallery">
        <ul>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t01.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t02.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t03.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t04.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t05.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t06.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t07.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t08.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t09.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t10.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t11.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t12.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t13.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t14.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t15.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t16.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t17.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t18.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t19.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t20.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t21.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t22.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t23.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t24.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t25.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t26.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t27.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t28.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t29.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t30.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t31.jpg" title="" alt="" /></i><span></span></li>
            <li><i><img src="http://swampyankeebbq.com/images/photos/t32.jpg" title="" alt="" /></i><span></span></li>
            <li class="click"><i><img class="default" src="http://swampyankeebbq.com/images/photos/t01.jpg" title="" alt="" /></i><span></span></li>
        </ul>
</div>

CSS：

#gallery {width:580px; height:360px; position:relative;}
#gallery ul {list-style:none; padding:5px; margin:0; width:195px; float:right; height:219px; overflow:auto;}
#gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}
#gallery ul li img {display:block; width:50px; height:50px;}
#gallery ul li span {display:none; position:absolute; left:340px; top:235px; width:200px;font-family:verdana, arial, sans-serif; color:#06a; font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li span b {color:#444;}

/* required for IE5.x and IE6 to display the start image size correctly */
#gallery ul li.click i img.default {margin:5px auto 0 auto; width:320px; height:240px; border:1px solid #fff;}

#gallery ul li.off {display:none;}

#gallery ul li.click {border-color:#fc0; background:#f8f8f8; cursor:default;}

#gallery ul li.click i {position:absolute; left:0; top:0; width:320px; height:355px;}

#gallery ul li.click i img {margin:5px auto 0 auto; width:auto; height:auto; border:1px solid #fff;}

#gallery ul li.click span {display:block;}

和javascript：

clickMenu = function (menu) {
    var getEls = document.getElementById(menu).getElementsByTagName("LI");
    var getAgn = getEls;

    for (var i = 0; i < getEls.length; i++) {
        getEls[i].onclick = function () {
            for (var x = 0; x < getAgn.length; x++) {
                getAgn[x].className = getAgn[x].className.replace("click", "");
            }
            this.className += " click";
        }
    }
}

Answer 1

您需要使用gallery容器元素的clickMenu作为参数调用id函数。您当前的实现不会在任何地方调用该函数。

您可以尝试在正文onload上执行此操作：

<body onload="clickMenu('gallery');">

图库缩略图点击不起作用

1 个答案: