1.图片的切换
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<body>
<img id="icon" src="../images/icon-01.jpg" alt="">
<p></p>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script type="text/javascript">
window.onload = function() {
//1.获取需要的标签
var icon = document.getElementById("icon");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//2.监听按钮的点击
var maxIndex = 5,minIndex = 1,currentIndex = minIndex;
//上一张
prev.onclick = function() {
if (currentIndex === minIndex) {
currentIndex = maxIndex;
} else {
currentIndex--;
}
icon.setAttribute("src", "../images/icon-0" + currentIndex + ".jpg");
};
//下一张
next.onclick = function() {
if (currentIndex === maxIndex) {
currentIndex = minIndex;
} else {
currentIndex++;
}
icon.setAttribute("src", "../images/icon-0" + currentIndex + ".jpg");
};
}
</script>
</body>
</html>
2.图片的隐藏和显示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<body>
<button id="btn">隐藏</button>
<p></p>
<img src="../images/icon-01.jpg" alt="">
<script type="text/javascript">
window.onload = function() {
//1.获取事件源
var btn = document.getElementById("btn");
var img = document.getElementsByTagName("img")[0];
//2.绑定事件
btn.onclick = function() {
if (btn.innerText === "隐藏") {
img.style.display = "none";
btn.innerText = "显示";
} else {
img.style.display = "block";
btn.innerText = "隐藏";
}
}
}
</script>
</body>
</html>
3.简化版相册
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
}
ul {
width:540px;
height:100px;
display:flex;
justify-content:space-around;
}
li {
width:100px;
height:100px;
float:left;
}
</style>
</head>
<body>
<!--大图描述-->
<p id="des">蒲公英</p>
<!--大图展示-->
<img id="big_img" src="../images/img-01.jpg" alt="" width="540px" height="540px">
<!--小图列表-->
<ul id="fj">
<li>
<a href="../images/img-01.jpg" title="蒲公英">
<img src="../images/img-01.jpg" alt="蒲公英" width="100px" height="100px">
</a>
</li>
<li>
<a href="../images/img-02.jpg" title="热气球">
<img src="../images/img-02.jpg" alt="热气球" width="100px" height="100px">
</a>
</li>
<li>
<a href="../images/img-03.jpg" title="小屋">
<img src="../images/img-03.jpg" alt="小屋" width="100px" height="100px">
</a>
</li>
<li>
<a href="../images/img-04.jpg" title="河流">
<img src="../images/img-04.jpg" alt="河流" width="100px" height="100px">
</a>
</li>
<li>
<a href="../images/img-05.jpg" title="山川">
<img src="../images/img-05.jpg" alt="山川" width="100px" height="100px">
</a>
</li>
</ul>
<script type="text/javascript">
window.onload = function() {
//1.获取事件源
var ul = document.getElementById("fj");
var aList = ul.getElementsByTagName("a");
var des = document.getElementById("des");
var big_img = document.getElementById("big_img");
//2.绑定事件
for (var i = 0; i < aList.length; i++) {
aList[i].onclick = function() {
console.log(this.href);
big_img.src = this.href;
console.log(this.title);
des.innerText = this.title;
return false; //禁止点击后跳转到图片
}
}
}
</script>
</body>
</html>