标题:图片和文字切换效果失败,哪个函数出问题了?
取消只看楼主
青城山下
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2016-3-12
结帖率:0
已结贴  问题点数:20 回复次数:0 
图片和文字切换效果失败,哪个函数出问题了?
在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>
搜索更多相关主题的帖子: title 图片 
2016-03-12 13:33



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-462397-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.251886 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved