DOM学习之图片库切换效果
程序员文章站
2022-12-19 23:52:10
HTML代码 CSS代码 ......
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;
}
下一篇： 有没有自学前端开发的小伙伴儿？