首页新闻找找看学习计划

javascript加载问题

0
悬赏园豆:10 [已解决问题] 解决于 2017-04-03 13:07

是这样我写了一个小特效

如图 点击上面的图片会在下面这个相框中显示 但是这个文件一直在不停的加载中所以JavaScript代码根本没有运行 也就实现不了我想要的效果了 望答疑解惑

问题补充:

function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}

function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

addLoadEvent(prepareGallery);

那年夏天的啄木鸟的主页 那年夏天的啄木鸟 | 菜鸟二级 | 园豆:274
提问于:2017-03-24 10:09
< >
分享
最佳答案
0

代码呢。。。。

收获园豆:10
龙行天涯 | 小虾三级 |园豆:1830 | 2017-03-24 12:47

代码已贴

那年夏天的啄木鸟 | 园豆:274 (菜鸟二级) | 2017-03-27 15:39

@微博: 不知道你为什么会有这么多代码,试试我的,看看是不是你想要的效果。关键是js代码部分。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            overflow: hidden;
        }

            ul li {
                list-style: none;
                float: left;
                width: 300px;
                margin: 5px;
                height: 200px;
            }

                ul li img {
                    width: 100%;
                    height: 100%;
                }
    </style>
    <script>
        window.onload = function () {
            var list = document.getElementsByTagName("li");
            for (var i = 0; i < list.length; i++) {
                list[i].onclick = function () {
                    var src = this.childNodes[1].getAttribute("src");
                    document.getElementById("showimg").setAttribute("src", src);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <li>
                <img src="../Image/19300001140.jpg" />
            </li>
            <li>
                <img src="../Image/2008071400300.jpg" />
            </li>
            <li>
                <img src="../Image/37174093_17.jpg" />
            </li>
            <li>
                <img src="../Image/63029307_16.jpg" /></li>
            <li>
                <img src="../Image/enterdes388C0.jpg" /></li>
            <li>
                <img src="../Image/392564.jpg" /></li>
            <li>
                <img src="../Image/ntk-1309-5364.jpg" /></li>
        </ul>
        <div style="width: 300px; height: 200px; border: 1px solid #0094ff; margin: 5px;" id="show">
            <img src="" id="showimg" style="width: 100%; height: 100%;" alt="暂无图片" />
        </div>
    </div>
</body>
</html>

把图片路劲改后,就可以直接运行看效果。

 

另外,给个建议,以后贴代码大量代码的时候,记得使用插入代码插件,就在编辑器右上角倒数第二个图标。

不然这样贴别人看都懒得看。

 

我也只看了你的文字描述和图片,:),偷笑

龙行天涯 | 园豆:1830 (小虾三级) | 2017-03-27 16:46
其他回答(2)
0

代码贴出来!

pengbg | 园豆:13 (初学一级) | 2017-03-24 11:00

代码已贴

支持(0) 反对(0) 那年夏天的啄木鸟 | 园豆:274 (菜鸟二级) | 2017-03-27 15:39
0

代码才能看出问题

yangzailu | 园豆:9 (初学一级) | 2017-03-26 21:04

代码已贴

支持(0) 反对(0) 那年夏天的啄木鸟 | 园豆:274 (菜鸟二级) | 2017-03-27 15:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册