题目:五张图片通过普通按钮点击切换下一张,上一张。
<img src="1.jpg">这是图片
<button>点击切换下一张</button> 按钮
<button id="qwe">点击切换上一张</button> 按钮
接下来是链接上面的按钮
<script>
把所有功能封装到一个函数里面去
function fn(){
我们再创建一个变量来接收,返回的伪数组。
document.getElementsByTagName意思是:通过方法获取元素节点,
通过元素名获取对应的元素,获取取来的是一个类数组对象
var son = document.getElementsByTagName("img")[0];
var num = document.getElementsByTagName("button")[0];
这里道理如上都需要变量来接收返回的数据。
var num2 = document.getElementById("qwe")
这里道理如上都需要变量来接收返回的数据。
var i = 1;
这是创建一个变量设置为1
到这里之后就需要用到点击事件
点击一下num改变图片路径就达成切换图片
num.onclick = function(){
i++;上面i已经为1这里再i++则为2
这里需要判断一下
如果i=5则把i从新赋值1
if(i == 5){
i =1
}
这里使用了字符串拼接方法改变图片路径
上面已经i= 2了这里则的意思为
img src= "./2.jpg"
son.src = "./"+ i +" .jpg"
这样就已经完成了点击切换下一张图片然后只需要复制黏贴一下就可以完成点击
切换上一张图片了。
到了这里i变i--了是因为切换到上一张图片需要-1
num2.onclick = function(){
i--;
这里判断i如果减到了0
则重新把i赋值为5
if(i == 0){
i = 5;
}
son.src = "./"+ i +".jpg"
}
}
}
</script>
谢谢观看,敬请见谅!