addloadevent(prepareplaceholder())

addloadevent(prepareGallery())

//页面加载完时执行函数

function addloadevent(func) { //参数放入你界面加载完要执行的函数

    var oldonload = window.onload;

    if (typeof window.onload != 'function') {

        window.onload = func;

    } else {

        oldonload();

        func();

    }

}

// 向后插入元素方法

function insertAfter(ent,hou) { //第一个参数你要出入的节点，第二参数你要插入谁的后面

    var parer = hou.parentNode; //获取他的父级判断所选的元素是否是最后一个

    if (parer.lastChild == hou) {

        parer.appendChild(ent); //如果是最后一个直接执行appendChild插入到后面

    } else {

        parer.insertBefore(ent, hou.nextSibling); //如果不是则插入到父级的同级的前面 

    }

}

//插入img 和 p节点设置属性

function prepareplaceholder() {

    if (!document.createElement) return false;

    if (!document.createTextNode) return false;

    if (!document.getElementById) return false;

    if (!document.getElementById("imagegallery")) return false;

    //创建一个img标签设置属性

    var placeholder = document.createElement("img");

    placeholder.setAttribute("id", "placeholder");

    placeholder.setAttribute("src", "img/200u0l000000d8n8xB0E3_R_550_412.jpg");

    placeholder.setAttribute("alt", "第一张图片");

    //创建一个p标签给他设置属性

    var description = document.createElement("p");

    description.setAttribute("id", "description");

    var desctext = document.createTextNode("第一张图片");

    description.appendChild(desctext);

    // 将创建好的标签插入HTML文档中

    var gallery = document.getElementById("imagegallery");

    insertAfter(placeholder, gallery);

    insertAfter(description, placeholder);

}

//给a标签绑定点击事件

function prepareGallery() {

    if (!document.getElementsByTagName) return false;

    if (!document.getElementById) return false;

    if (!document.getElementById("imagegallery")) return false;

    var galley = document.getElementById("imagegallery");

    var links = galley.getElementsByTagName("a");

    for (var i = 0; i < links.length; i++) {

        links[i].onclick = function() {

            return showPic(this);

        }

        links[i].onkeypress = links[i].onclick;

    }

}

//点击后执行的函数

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("placeholder")) return false;

    if (whichpic.getAttribute("title")) {

        var text = whichpic.getAttribute("title");

    } else {

        text = "";

    }

    var description = document.getElementById("description");

    //判断P标签中的节点类型 3为文本类型#text 设置文本

    if (description.firstChild.nodeType == 3) {

        description.firstChild.nodeValue = text;

    }

    return false;

}

HTML代码

<!DOCTYPE html>

<html>

<head>

    <title>图片库效果</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

    <h1>点击图片效果</h1>

    <ul id="imagegallery">

        <li>

            <a href="img/200u0l000000d8n8xB0E3_R_550_412.jpg" title="第一张图">

                <img src="img/200u0l000000d8n8xB0E3_R_550_412.jpg" alt="fffd">

            </a>

        </li>

        <li>

            <a href="img/20080o000000f95k889B2_R_550_412.jpg" title="第二张图">

                <img src="img/20080o000000f95k889B2_R_550_412.jpg" alt="bbf">

            </a>

        </li>

        <li>

            <a href="img/200h0d0000006tsrr8195_R_550_412.jpg" title="第三张图">

                <img src="img/200h0d0000006tsrr8195_R_550_412.jpg" alt="fff ">

            </a>

        </li>

        <li>

            <a href="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" title="第四张图">

                <img src="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" alt="fff ">

            </a>

        </li>

    </ul>

    <script type="text/javascript" src="js/script.js"></script>

</body>

</html>

CSS代码

h1{

    width: 290px;

    margin: 0 auto;

    height: 60px;

    line-height: 60px;

    text-align: center;

    color: #13af13;

}

#imagegallery{

    width: 290px;

    height: 50px;

    margin: 0 auto;

    padding: 5px 0 0 0;

    background-color: #e2e2e2;

}

#imagegallery li{

    float: left;

    width: 60px;

    list-style: none;

    margin-left: 10px;

}

#imagegallery img ,#imagegallery a{

    text-decoration: none;

    font-style: normal;

    display: block;

    width: 100%;

}

#placeholder{

    display: block;

    border: 4px solid #13af13;

    width: 282px;

    margin: 0 auto;

}

p{

    text-align: center;

}

DOM学习之图片库切换效果的更多相关文章

  1. iOS 视图控制器转场动画/页面切换效果/跳转动画 学习

    一 学习 在 UINavigationController 中 push 和 pop 的转场效果  (基于iOS7 以上的转场方式) 经过学习了解到,重点分三块: (1)pushAnimation:  ...

  2. 【转】 Pro Android学习笔记（四二）：Fragment（7）：切换效果

    目录(?)[-] 利用setTransition 利用setCustomAnimations 通过ObjectAnimator自定义动态效果 程序代码的编写 利用fragment transactio ...

  3. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  4. 极富创意的3D文件夹切换效果

    今天分享的是一个极富创意的文件夹切换效果.这个案例使用CSS 3动画实现了一个3D的平行六面体旋转效果.点击顶部的3个按钮可以旋转并切换.另外,每个六面体本身是一个文件夹,点击后可以展开查看里面的详情 ...

  5. 巧用ViewPager 打造不一样的广告轮播切换效果

    一.概述 如果大家关注了我的微信公众号的话,一定知道我在5月6号的时候推送了一篇文章,文章名为Android超高仿QQ附近的人搜索展示(一),通过该文可以利用ViewPager实现单页显示多个Item ...

  6. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  7. Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

  8. Android 自定义 ViewPager 打造千变万化的图片切换效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主 ...

  9. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

随机推荐

  1. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  2. Office 365 的公共网站的一些限制及解决的办法

    当前的SharePoint Online版本是基于SharePoint 2013的,但是很多功能确被阉割掉了. 下面主要列出Office 365公共网站被限制的功能,以及可绕过的解决方案: 内容类型 ...

  3. Codeforces 2018-2019 ICPC, NEERC, Southern Subregional Contest

    2018-2019 ICPC, NEERC, Southern Subregional Contest 闲谈: 被操哥和男神带飞的一场ACM,第一把做了这么多题,荣幸成为7题队,虽然比赛的时候频频出锅 ...

  4. 使用 Swift 3.0 操控日期

    作者:Joe,原文链接,原文日期:2016-09-20译者:Cwift:校对:walkingway:定稿:CMB 当你在想要 大规模重命名 时,一个附带的挑战就是要确保所有相关的文档都必须同步更新.比 ...

  5. 每日算法——新型在线LCA

    在线LCA一般大家都会用倍增吧,时间复杂度O(nlogn),空间复杂度O(nlogn),都是非常严格的复杂度限制,并且各种边界处理比较麻烦,有没有更快更好的办法呢? 我们发现,在树链剖分时,我们不经意 ...

  6. Selenium获取input值的两种方法：WebElement.getAttribute("value")和WebElement.getText()

    在页面元素的定位中,有时候需要获取到元素的页面显示值,用来作为断言.例如,我需要获取email的值"amy1111@xxx.com". <input class=" ...

  7. bug，实现类未找到service

  8. Xcode控制台输出中文

    创建一个.m文件,然后将一下代码加入.m文件中即可实现控制台输出中文,具体代码如下: #ifndef Release @implementation NSSet(Log) - (NSString *) ...

  9. 华为 荣耀 等手机解锁BootLoader

    下载工具按提示操作即可 链接:https://pan.baidu.com/s/1qZezd1q 密码:8pad 备用链接:https://pan.baidu.com/s/1nwv0heD

  10. Apache安装简述

    软件下载地址:http://pan.baidu.com/s/1o8oexKI 1.httpd -k install 2.httpd -k restart 3.启动bin文件夹里的httpd.exe 4 ...