javascript事件点击

题目:五张图片通过普通按钮点击切换下一张,上一张。

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

谢谢观看,敬请见谅!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值