介绍
本文是在学习JS所做的学习笔记,所有笔记内容请看:JS学习笔记
图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="info"></p>
<img src="img/1.jpg" alt="冰棍"/>
<button id="pre">点我一下</button>
<button id="next">点我一下</button>
<script>
/*
点击按钮切换图片
*/
var prev=document.getElementById("pre");
var next=document.getElementById("next");
var img=documnet.getElementsByTagName("img")[0];
// 创建一个数组,保存图片路径
var imgArr=['img/1.img','img/2.img','img/3.img','img/4.img']
//创建一个变量,保存图片索引
var index=0;
// 设置图片提示
var info=documen.getElementById("info");
info.innerHTML="一共"+imgArr.length+"图片,当前是第”+(index+1)+"张"
/*
切换图片,就是修改图片src
*/
prev.onclick=function(){
index--;
if(index<0){
index=0
}
info.innerHTML="一共"+imgArr.length+"图片, 当前是第”+(index+1)+"张"
img.src=imgArr[index];
}
next.onclick=function(){
// 修改元素属性
index++
if(index>imgArr.length-1){
index=imgArr.lenght-1;
}
info.innerHTML="一共"+imgArr.length+"图片, 当前是第”+(index+1)+"张"
img.src=imgArr[index];
}
</script>
</body>
</html>