<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:200px;
}
</style>
<script>
var n = 1;
function changePic(m){
return n = m;
}
function change(){
var myImg = document.getElementsByTagName("img")[0];
myImg.src = "images/0" + n + ".jpg";
if(n<5)n++;
else n=1;
}
</script>
</head>
<body onload="setInterval(change,1000);">
<img src="images/01.jpg" alt="" width="200">
<div>
<a href="images/01.jpg" onclick="changePic(1)">屋檐</a>
<a href="images/02.jpg" onclick="changePic(2)">旅游</a>
<a href="images/03.jpg" onclick="changePic(3)">红墙</a>
<a href="images/04.jpg" onclick="changePic(4)">梅花</a>
<a href="images/05.jpg" onclick="changePic(5)">宫殿</a>
</div>
</body>
</html>
上面的代码图片可以轮播,每次点击某个a的时候,会立即跳到那个图片,但是有个问题,会打开一个新的窗口,在新窗口中显示图片,如何不打开这个窗口,在原来的窗口显示图片?
我尝试过的方法,都不行
1.每个a中添加target="_self"
2.修改
function changePic(m){
var myImg = document.getElementsByTagName("img")[0];
myImg.src = "images/0" + m + ".jpg";
return n = m;
}
三种方法.
最好把事件注册到父元素 div 上.