1. addloadevent(prepareplaceholder())
  2. addloadevent(prepareGallery())
  3. //页面加载完时执行函数
  4. function addloadevent(func) { //参数放入你界面加载完要执行的函数
  5. var oldonload = window.onload;
  6. if (typeof window.onload != 'function') {
  7. window.onload = func;
  8. } else {
  9. oldonload();
  10. func();
  11. }
  12. }
  13. // 向后插入元素方法
  14. function insertAfter(ent,hou) { //第一个参数你要出入的节点,第二参数你要插入谁的后面
  15. var parer = hou.parentNode; //获取他的父级判断所选的元素是否是最后一个
  16. if (parer.lastChild == hou) {
  17. parer.appendChild(ent); //如果是最后一个直接执行appendChild插入到后面
  18. } else {
  19. parer.insertBefore(ent, hou.nextSibling); //如果不是则插入到父级的同级的前面
  20.  
  21. }
  22. }
  23. //插入img 和 p节点设置属性
  24. function prepareplaceholder() {
  25. if (!document.createElement) return false;
  26. if (!document.createTextNode) return false;
  27. if (!document.getElementById) return false;
  28. if (!document.getElementById("imagegallery")) return false;
  29. //创建一个img标签设置属性
  30. var placeholder = document.createElement("img");
  31. placeholder.setAttribute("id", "placeholder");
  32. placeholder.setAttribute("src", "img/200u0l000000d8n8xB0E3_R_550_412.jpg");
  33. placeholder.setAttribute("alt", "第一张图片");
  34. //创建一个p标签给他设置属性
  35. var description = document.createElement("p");
  36. description.setAttribute("id", "description");
  37. var desctext = document.createTextNode("第一张图片");
  38. description.appendChild(desctext);
  39. // 将创建好的标签插入HTML文档中
  40. var gallery = document.getElementById("imagegallery");
  41. insertAfter(placeholder, gallery);
  42. insertAfter(description, placeholder);
  43. }
  44. //给a标签绑定点击事件
  45. function prepareGallery() {
  46. if (!document.getElementsByTagName) return false;
  47. if (!document.getElementById) return false;
  48. if (!document.getElementById("imagegallery")) return false;
  49.  
  50. var galley = document.getElementById("imagegallery");
  51. var links = galley.getElementsByTagName("a");
  52.  
  53. for (var i = 0; i < links.length; i++) {
  54. links[i].onclick = function() {
  55. return showPic(this);
  56. }
  57. links[i].onkeypress = links[i].onclick;
  58. }
  59. }
  60. //点击后执行的函数
  61. function showPic(whichpic) {
  62. if (!document.getElementById("placeholder")) return true;
  63.  
  64. var source = whichpic.getAttribute("href");
  65.  
  66. var placeholder = document.getElementById("placeholder");
  67. placeholder.setAttribute("src",source);
  68.  
  69. if (!document.getElementById("placeholder")) return false;
  70.  
  71. if (whichpic.getAttribute("title")) {
  72. var text = whichpic.getAttribute("title");
  73. } else {
  74. text = "";
  75. }
  76. var description = document.getElementById("description");
  77. //判断P标签中的节点类型 3为文本类型#text 设置文本
  78. if (description.firstChild.nodeType == 3) {
  79. description.firstChild.nodeValue = text;
  80. }
  81. return false;
  82. }

HTML代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <title>图片库效果</title>
  6. <link rel="stylesheet" type="text/css" href="css/style.css">
  7. </head>
  8.  
  9. <body>
  10. <h1>点击图片效果</h1>
  11. <ul id="imagegallery">
  12. <li>
  13. <a href="img/200u0l000000d8n8xB0E3_R_550_412.jpg" title="第一张图">
  14. <img src="img/200u0l000000d8n8xB0E3_R_550_412.jpg" alt="fffd">
  15. </a>
  16. </li>
  17. <li>
  18. <a href="img/20080o000000f95k889B2_R_550_412.jpg" title="第二张图">
  19. <img src="img/20080o000000f95k889B2_R_550_412.jpg" alt="bbf">
  20. </a>
  21. </li>
  22. <li>
  23. <a href="img/200h0d0000006tsrr8195_R_550_412.jpg" title="第三张图">
  24. <img src="img/200h0d0000006tsrr8195_R_550_412.jpg" alt="fff ">
  25. </a>
  26. </li>
  27. <li>
  28. <a href="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" title="第四张图">
  29. <img src="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" alt="fff ">
  30. </a>
  31. </li>
  32. </ul>
  33. <script type="text/javascript" src="js/script.js"></script>
  34. </body>
  35.  
  36. </html>

CSS代码

  1. h1{
  2. width: 290px;
  3. margin: 0 auto;
  4. height: 60px;
  5. line-height: 60px;
  6. text-align: center;
  7. color: #13af13;
  8. }
  9. #imagegallery{
  10. width: 290px;
  11. height: 50px;
  12. margin: 0 auto;
  13. padding: 5px 0 0 0;
  14. background-color: #e2e2e2;
  15. }
  16. #imagegallery li{
  17. float: left;
  18. width: 60px;
  19. list-style: none;
  20. margin-left: 10px;
  21. }
  22. #imagegallery img ,#imagegallery a{
  23. text-decoration: none;
  24. font-style: normal;
  25. display: block;
  26. width: 100%;
  27. }
  28. #placeholder{
  29. display: block;
  30. border: 4px solid #13af13;
  31. width: 282px;
  32. margin: 0 auto;
  33. }
  34. p{
  35. text-align: center;
  36. }

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. getAttribute for IE7

    getAttribute 大部分介绍都说仅仅有一个.包含w3cschool. 事实上这种方法在iE7下有两个參数. msdn 上查到的. 简单翻一下 0 是默认情况,不区分大写和小写! 1 区分大写和 ...

  2. Cocos2d-X开发中国象棋《三》開始场景的实现

    在前面两节(第一节.第二节)中介绍了中国象棋的功能和project文件.在这篇博客中将介绍中国象棋的開始场景的实现 在写代码前先理清一下实现開始场景的思路: 1.打开游戏后进入開始场景,场景上显示一个 ...

  3. ORACLE-017:SQL优化-is not null和nvl

    今天在优化一段sql,原脚本大致例如以下: select a.字段n from tab_a a where a.字段2 is not null; a.字段2添加了索引的,可是查询速度很慢. 于是做了例 ...

  4. 在Twitter信息流中大规模应用深度学习——推文的相关度计算使用了深度学习

    我们如何对信息流进行排序? 在引入排序算法之前,信息流的组成非常简单:收集所有由你的关注对象在你最后一次登录Twitter之后发送的推文,再将它们按照时间倒序显示出来.这个看起来很简单,但要为数以亿计 ...

  5. SpringMVC使用POST方法传递数据,却出现Request method 'GET' not supported?

    转自:https://segmentfault.com/q/1010000011245770 问题:没有使用get获取当前页面解决方案:   @RequestMapping(value = " ...

  6. 截取字符(substr)检索字符位置(instr)

    1.SUBSTR(string,start_position,[length]) 求子字符串,返回字符串注释: string 元字符串start_position 开始位置(从0开始)length 可 ...

  7. MySQL-基础操作之增删改查

    1.增 (1)创建数据库dks create database dks; (2)创建名为t1的表,并指定引擎和字符集: ) not null,ages int) engine=innodb defau ...

  8. Unity5.3.6升级到Unity5.4.4 NGUI出现Ignoring menu item NGUI because it is in no submenu!问题解决方案

    目录Assets/Plugins/NGUI/Scripts/Editor/NGUIMenu.cs文件中找到下图(左)所示,改成(右)图所示

  9. 5.29 @Value{name}无效时怎么办Could not resolve placeholder ‘name22’ in value “${name22}” 错误解决

    springboot Caused by: java.lang.IllegalArgumentException: Could not resolve placeholder ‘name22’ in ...

  10. C# 怎么把类文件如(XXX.cs)转为dll文件

    打开VS2012或2017 ,新建项目,选择  类库(.NET Framework),创建好一个项目 在建好的项目中添加需要转的类文件 然后将项目重新生成后,在项目的Debug下就可以找到对应的dll ...