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);
最佳答案
0
代码呢。。。。
收获园豆：10
代码已贴
@微博: 不知道你为什么会有这么多代码，试试我的，看看是不是你想要的效果。关键是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>
把图片路劲改后，就可以直接运行看效果。
另外，给个建议，以后贴代码大量代码的时候，记得使用插入代码插件，就在编辑器右上角倒数第二个图标。
不然这样贴别人看都懒得看。
我也只看了你的文字描述和图片，:),偷笑
其他回答(2)
0
代码贴出来！
代码已贴
0
代码才能看出问题
代码已贴