点击下方切换图片



0
//要实现的功能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;
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我这chrome和firefox点五次都正常跳转了啊
是不是你那边有广告拦截什么的?