好像没有什么知识点,那么直接上案例
实现上下图片的切换,,一共有10张图片
<body>
<img id="icon" src="img/icon_01.png" alt="">
<p></p>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script>
window.onload = function () {
// 1. 获取需要的标签
var icon = document.getElementById("icon");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// 2. 监听按钮的点击
var maxIndex = 9, minIndex = 1, currentIndex = minIndex;# 默认是第一张
prev.onclick = function () {
if (currentIndex === minIndex){ // 边界值
currentIndex = maxIndex;
}else { // 正常情况
currentIndex --;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
console.log(icon.src);
};
next.onclick = function () {
if (currentIndex === maxIndex){ // 边界值
currentIndex = minIndex;
}else { // 正常情况
currentIndex ++;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
console.log(icon.src);
};
}
</script>
</body>
显示隐藏图片
<body>
<button id="btn">隐藏</button>
<p></p>
<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>
来个简单的的例子
<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 lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 50px;
}
#fj{
list-style: none;
}
#fj li{
float: left;
margin-left: 10px;
}
#big_img{
margin-left: 10px;
}
#des{
margin: 10px;
color: orangered;
font-size: 20px;
}
</style>
</head>
<body>
<!--大图描述-->
<p id="des">蒲公英</p>
<!--大图展示-->
<img id="big_img" src="img/1.jpg" alt="" width="540">
<!--小图列表-->
<ul id="fj">
<li>
<a href="img/1.jpg" title="蒲公英">
<img src="img/1.jpg" width="100" alt="蒲公英">
</a>
</li>
<li>
<a href="img/2.jpg" title="热气球">
<img src="img/2.jpg" width="100" alt="热气球">
</a>
</li>
<li>
<a href="img/3.jpg" title="别致小屋">
<img src="img/3.jpg" width="100" alt="别致小屋">
</a>
</li>
<li>
<a href="img/4.jpg" title="高山湖水">
<img src="img/4.jpg" width="100" alt="高山湖水">
</a>
</li>
<li>
<a href="img/5.jpg" title="高速公路">
<img src="img/5.jpg" width="100" alt="高速公路">
</a>
</li>
</ul>
<script>
window.onload = function () {
// 1. 获取需要的标签
var ul = document.getElementById("fj");
var aList = ul.getElementsByTagName("a");
// console.log(aList[1]);
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 () {
big_img.src = this.href;
des.innerHTML = this.title;
/* console.log(this.href);
console.log(this.title);*/
return false;
}
}
}
</script>
</body>
</html>