您的位置:首页技术文章
文章详情页

javascript - 为什么当index等于5的时候,不在当前页面跳转到百度?不跳转的代码在倒数第五行

【字号: 日期:2022-06-24 14:41:54浏览:51作者:猪猪

问题描述

<!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>

</head><body>

<h1>点击下方切换图片</h1><ul id='pic'><li><a href='https://www.haobala.com/wenda/1.jpg'>图片一</a></li><li><a href='https://www.haobala.com/wenda/2.jpg'>图片二</a></li><li><a href='https://www.haobala.com/wenda/3.jpg'>图片三</a></li><li><a href='https://www.haobala.com/wenda/4.jpg'>图片四</a></li></ul>

<p><img src='https://www.haobala.com/wenda/1.jpg' alt='图片' /><img src='https://www.haobala.com/wenda/5.jpg' alt='图片' /><img src='https://www.haobala.com/wenda/2.jpg' alt='图片' /></p><h1 id='index'>0</h1>

</body></html><script>

//要实现的功能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;}

</script>

问题解答

回答1:

我这chrome和firefox点五次都正常跳转了啊是不是你那边有广告拦截什么的?

标签: 百度