javascrpit学习笔记一
2020-05-11 本文已影响0人
爱学习的代代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="photo">
<a href="javascript:;" id="next">下一个</a>
<img id="img" src="image\image1.png" alt="">
<a href="javascript:;" id="pre">上一个</a>
</div>
</div>
<script>
var next = document.getElementById('next');
var pre = document.getElementById('pre');
var img = document.getElementById('img');
var arr = ['image/image1.png','image/image2.png','image/image3.png', 'image/image4.png']
var num = 0;
next.onclick = function() {
num++;
if (num > arr.length - 1) {
num = 1
}
img.src = arr[num]
}
pre.onclick = function() {
num--;
if (num <= 0) {
num = arr.length -1 ;
}
img.src = arr[num];
}
</script>
</body>
</html>
a标签因为是超链接，会导致页面的刷新或者跳转，可在href内添加
javascript:;来禁用。
执行一段空白的javascrpit语句，来防止页面跳转。
另一种方式：
<a href="#" id="next">下一个</a>
