1.图片切换
功能描述：可以通过按钮“上一张”“下一张”切换图片
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style>
img {
width: 250px;
height: 150px;
}
#btn {
width: 250px;
text-align: center;
}
</style>
</head>
<body>
<img src="img/img_01.jpg" alt="图片">
<div id="btn">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
<script>
window.onload = function() {
// 1. 获取需要的标签
var img = document.getElementsByTagName("img")[0];
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--;
}
img.setAttribute("src", "img/img_0" + currentIndex + ".jpg");
};
// 下一张
next.onclick = function() {
if (currentIndex === maxIndex) { // 边界值
currentIndex = minIndex;
} else { // 正常情况
currentIndex++;
}
img.setAttribute("src", "img/img_0" + currentIndex + ".jpg");
console.log(img.src);
};
}
</script>
</body>
</html>2.图片显示与隐藏
功能描述：通过点击按钮实现图片显示或隐藏功能
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片显示与隐藏</title>
</head>
<body>
<button id="btn">隐藏</button>
<img src="img/img_01.jpg" alt="">
<script>
window.onload = function() {
// 1. 获取事件源和相关的元素
var btn = document.getElementById("btn");
var img = document.getElementsByTagName("img")[0];
// 2.绑定事件
btn.onclick = function() {
// 3. 事件的驱动程序
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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图片册</title>
<link rel="stylesheet" href="">
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
margin: 50px;
}
ul {
list-style: none;
}
#box {
width: 451px;
border: 3px solid #ccc;
padding: 5px;
}
#list {
overflow: hidden;
}
ul li {
float: left;
margin-right: 10px;
}
ul li:last-child {
margin-right: 0px;
}
ul li a img {
width: 100px;
}
#big_img {
width: 430px;
}
#desc {
width: 430px;
border-top: 2px solid #ccc;
font-size: 18px;
color: #7f7979;
font-weight: bolder;
padding: 5px 0px;
}
</style>
</head>
<body>
<div id="box">
<!-- 小图列表 -->
<div id="list">
<ul>
<li>
<a href="images/1.JPG" title="大海">
<img src="images/1.JPG" alt="大海" />
</a>
</li>
<li>
<a href="images/2.JPG" title="田园">
<img src="images/2.JPG" alt="田园" />
</a>
</li>
<li>
<a href="images/3.JPG" title="夕阳">
<img src="images//3.JPG" alt="夕阳" />
</a>
</li>
<li>
<a href="images/4.JPG" title="小道">
<img src="images/4.JPG" alt="小道" />
</a>
</li>
</ul>
</div>
<!-- 大图展示 -->
<div>
<p id="desc">大海</p>
<img id="big_img" src="images/1.JPG" alt="">
</div>
</div>
<script>
window.onload = function() {
var bigImg = document.getElementById("big_img");
var desc = document.getElementById("desc");
var alist = document.getElementsByTagName("a")
console.log(alist.length)
for (var i = 0; i < alist.length; i++) {
alist[i].onclick = function() {
console.log(this)
desc.innerHTML = this.title;
bigImg.src = this.href;
// 取消默认的a标签的href跳转
return false;
}
}
}
</script>
</body>
</html>4.关闭小广告
功能描述：点击右上角关闭图标，关闭图片显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
position: relative;
display: inline-block;
}
#close {
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<img id="icon" src="images/1.jpg" alt="" width="200">
<img id="close" src="img/close.jpg" alt="" width="20">
</div>
<script>
window.onload = function() {
// 1. 获取需要的标签
var box = document.getElementById("box");
var close = document.getElementById("close");
// 2. 给事件源绑定事件
close.onclick = function() {
box.style.display = "none";
// this.parentNode.style.display = "none";
}
}
</script>
</body>
</html>5.图标切换
功能描述：鼠标移入，切换图标，鼠标移出则回到移入前的图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="logo" src="img/img1.jpg" alt="" width="258">
<script>
window.onload = function() {
// 1. 获取需要的标签
var logo = document.querySelector("#logo");
// console.log(logo);
// 2. 绑定事件
logo.onmouseover = function() {
console.log("鼠标进入图片");
// logo.src = "img/img2.jpg";
this.src = "img/img2.jpg";
//console.log(this);
};
logo.onmouseout = function() {
console.log("鼠标离开图片");
this.src = "img/img1.jpg";
};
logo.onmousemove = function() {
console.log("鼠标在图片上移动");
}
}
</script>
</body>
</html>6.鼠标划入划出-图片切换
功能描述：鼠标移入，切换图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标划入划出-图片切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
border: 1px solid #cccccc;
width: 360px;
height: 70px;
padding-top: 360px;
margin: 100px auto;
background: url("images/01big.jpg") no-repeat;
}
ul {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/05.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload = function() {
// 1. 获取需要的标签
var box = document.getElementById("box");
var allLi = box.getElementsByTagName("li");
// 2. 监听鼠标的进入
for (var i = 0; i < allLi.length; i++) {
var sLi = allLi[i];
sLi.index = i + 1;
sLi.onmouseover = function() {
console.log(this.index);
box.style.background = 'url("images/0' + this.index + 'big.jpg") no-repeat';
}
}
}
</script>
</body>
</html>