js实现图片库
编译器:visual Studio code
html片段
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>切换图片</title>
<link href="css/01.css" rel="stylesheet">
</head>
<body>
<h1>修仙步骤</h1>
<div>
<div class="pic_select">
<ul id="galleryimages">
<li><a href="images/01.jpg" title="1">第一步</a></li>
<li><a href="images/02.jpg" title="2">第二步</a></li>
<li><a href="images/03.jpg" title="3">第三步</a></li>
<li><a href="images/04.jpg" title="4">第四步</a></li>
<li><a href="images/05.jpg" title="5">第五步</a></li>
<li><a href="images/06.jpg" title="6">第六步</a></li>
<li><a href="images/07.jpg" title="7">第七步</a></li>
<li><a href="images/08.jpg" title="8">第八步</a></li>
<li><a href="images/09.jpg" title="9">第九步</a></li>
<li><a href="images/10.jpg" title="极">第十步</a></li>
</ul>
</div>
<img src="images/00.jpg" id="change" title="0">
<div class="dump"></div>
</div>
<p id="description">修仙之路十为极</p>
<script type="text/javascript" src="js/01.js"></script>
</body>
</html>
js位置
1.js代码放在文档中的
2.js代码存在一个扩展名为js的独立文件。在里放置
3.js代码存在一个扩展名为js的独立文件。放在文档最后,之前。(推荐)
css片段
*
{
padding:0;
margin:0;
}
h1
{
text-align:center;
letter-spacing:1rem;
}
.pic_select
{
width:10rem;
margin-top:1rem;
margin-left:10rem;
padding-left:2rem;
float:left;
}
img
{
width:500px;
height:500px;
margin-top:1rem;
margin-right:5rem;
float:right;
}
.dump
{
clear:both;
}
li
{
margin-top:1.8rem;
}
a
{
color:#000;
text-decoration:none;
}
a:hover
{
color:red;
}
p
{
color:red;
font-size:1.5rem;
text-align:center;
}
目的:利用js实现点击图片链接在当前网页显示。
步骤:
- 增加一个“占位符”图片在这个网页上为图片预留一个浏览位置。
<img src="images/00.jpg" id="change" title="0">
- 点击链接时,切换图片,拦截网页的默认行为。
- 优化
首先js完成1
function showPic(whichpic)
{
var change = document.getElementById("change"); //获取change对象。
var source = whichpic.getAttribute("href"); //找出whichpic中的href属性。
change.setAttribute("src",source); //将source变成src的值。
}
因为a元素较多,我在这就不使用onclick事件。
使用onload事件,并用遍历数组将该图库实现2。
window.onload = appropriate;
function appropriate()
{
var gallery = document.getElementById("galleryimages");
var link = gallery.getElementsByTagName("a");
for(var i=0; i<link.length; i++)
{
link[i].onclick = founction ()
{
showPic(whichpic);
return false; //拦截网页的默认行为。
}
}
}
3省略