图片和文字切换效果失败,哪个函数出问题了?
在qq群里求了好久,没人帮忙,希望在这里可以有热心的大神帮忙看一下,困扰很久了。。。。目标效果是:点击链接,即可实现在当前页切换图片和文字!
出现的情况是:点击链接,跳出了当前页!
下面附上源码:
<div>
<ul id="imagegallery">
<li><a href="1.jpg" title="金" >图片一</a></li>
<li><a href="2.jpg" title="木" >图片二</a></li>
<li><a href="3.jpg" title="水" >图片三</a></li>
<li><a href="4.jpg" title="火" >图片四</a></li>
<li><a href="5.jpg" title="土" >图片五</a></li>
<li><a href="6.jpg" title="花" >图片六</a></li>
</ul>
</div>
<!--以下是一段为了实现内容与行为完全分离,并且达到平稳退化的一段js代码,目标效果是点击链接,即可实现在本页切换图片和文字!-->
<script>
function addLoadEvent(func){
//函数加载
var oldonload=window.onload;
if (typeof window.onload!='function')
{
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement){
//创建一个insertAfter函数,以便下面函数调用
var parent=targetElement.parentNode;
if (parent.lastChild==targetElement)
{
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceholder(){
//此函数创建一张大图和一句描述文本,其中调用了insertAfter()
var placeholder=document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","image.jpg");
placeholder.setAttribute("alt","这是一张插入的图片");
var description=document.createElement("p");
description.setAttribute("id","description");
var desttext=document.createTextNode("选择一张图片");
description.appendChild(desttext);
var gallery=document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
function prepareGallery(){
//此函数为点击事件函数
var gallery=document.getElementById("imagegallery");
var links=gallery.getElementsTagName("a");
for (var i=0;i<links.length ;i++ )
{
links[i].onclick=function(){
return showPic(this)?false:true;
}
links[i].onkeypress=links[i].onclick;
}
}
function showPic(whichpic){
//此函数将大图的src值、描述文本替换为锚值和它的描述文本,实现点击链接即替换大图和描述文本
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
return false;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
</script>