<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h1 {
height: 100px;
line-height: 100px;
text-align: center;
background: #dccccc;
}
ul {
width: 800px;
margin: 0 auto;
}
ul li {
list-style: none;
}
ul li a {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
display: block;
float: left;
background: #808080;
}
ul li a:hover {
background: #ff6a00;
}
p {
width: 1240px;
height: 300px;
margin: 55px auto;
}
p img {
display: block;
float: left;
margin-left: 10px;
}
h2 {
height: 100px;
line-height: 100px;
text-align: center;
background: #dccccc;
margin-top: -30px;
}
</style></kepala>
<badan>
<h1>点击下方切换图片</h1>
<ul id="pic"><li><a href="1.jpg" title="111111">图片一</a></li><li><a href="2.jpg" title="222222">图片二</a></li><li><a href="3.jpg" title="333333">图片三</a></li><li><a href="4.jpg" title="444444">图片四</a></li></ul>
<p><img src="1.jpg" alt="图片" /><img id="pid" src="5.jpg" alt="图片" /><img src="2.jpg" alt="图片" /></p>
<h1 id="index">0</h1>
</body>
</html>
<skrip>
//要实现的功能1：点击图片按钮时，中间图片为当前图片
//2.中间图片切换时，左边切换成当前图片的上一张，右边切换成当前图片的下一张；
//1.取出所有的A标。 2.点击图片按钮时切换图片 3.点击当前图片时，找出上一个兄弟元素，和下一个兄弟元素href的值 4.判断当点击第一个图片最后，让左边图片显示最后一个
//5.判断当点击最后一个图片时候，让右边图片显示成第一个i额
//第一步，取出所有的A标签
var pic = document.getElementById('pic').getElementsByTagName('a'); //第一步，取出所有的A标签
//循环遍历所有的A标签
for (var i = 0; i < pic.length; i++) {
//给所有的A标签绑定点击事件
pic[i].onclick = function () {
changeIndex();
console.log(this);
//取出当前点击的href的值
thisHerf = this.getAttribute('href');
//取出ID为pid的元素
var pid = document.getElementById('pid');
//g给ID为pid的img元素的src赋值
pid.setAttribute("src", thisHerf);
//取出当前点击图片的上一个A标签
var aA = this.parentNode;//去当前父元素
var aB = aA.previousSibling;//父元素的上一个兄弟元素
var aE = aA.nextSibling;//父元素的下一个兄弟元素
//左边图片切换
if (aB != null) {
var aC = aB.firstChild;//父元素的上一个兄弟元素的A标签
var aD = aC.getAttribute('href')//取出上一个A标签的href值
pid.previousSibling.setAttribute('src', aD);
}//判断当上一个元素不为空的时候，给id为pid 的img元素的上一个兄弟元素src赋值
else {
pid.previousSibling.setAttribute('src', '4.jpg')
}//判断当上一个元素为空的时候，给id为pid 的img元素的上一个兄弟元素src直接赋值最后一个href的值
//右边图片切换
if (aE != null) {
var aF = aE.firstChild//父元素下一个兄弟元素的A标签
var aJ = aF.getAttribute('href')//取出上一个A标签的href值
pid.nextSibling.setAttribute('src', aJ);
}//判断当下一个元素不为空的时候，给id为pid 的img元素的下一个兄弟元素src赋值
else {
pid.nextSibling.setAttribute('src', '1.jpg')
}//判断当下一个元素为空的时候，给id为pid 的img元素的下一个兄弟元素src直接赋值第一个href的值
return false;//返回false不运行A标签本身自带的点击事件
}
}
function changeIndex() {
var index = parseInt(document.getElementById('index').innerHTML);
index += 1;
document.getElementById('index').innerHTML = index;
if (index % 5 == 0) {
console.log(1);
window.location.href = "https://www.baidu.com/";
}
return false;
}</skrip>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Krom dan firefox saya diubah hala seperti biasa selepas lima klik
Adakah anda mempunyai penyekatan iklan atau sesuatu?