#神仙见了会流泪之最最最基础的#使用onclick完成图片切换

不要问为什么起这个看起来很长的标题,因为我也不知道为什么
下面进入正题:

因为我们的标题是最最最基础的,所以我们先来第一步,创建一个HTML文件,然后。。。哎呀!!哟!!!别打了别打了,这就开始

先说下思路(代码在下面):
1、首先,我们先创建盒子,里面装图片,按钮,按钮盒子都要加id(建议加id),在img标签中添加第一张图片
2、给两个按钮绑定单机响应函数
3、我们知道想实现这种效果就相当于每点击一次按钮就改变一次图片的src地址
4、然后在绑定的单机响应函数中插入图片,在上一页按钮中设置点击进入第一张图片,在下一页按钮设置点击进入第二张图片
5、然后发现图片不能写死在响应函数中,就获取img对象,然后创建一个数组,把所有图片的src地址都放进去
6、创建一个索引
7、设置点击上一页按钮时索引自减,并且图片的src地址设置成数组加索引的形式,下一页按钮也一样设置成索引自增,图片地址也设置成数组索引的形式
8、又发现在第一页的时候点击上一页就不会显示东西,所以设置向上翻按钮,如果索引小于0索引就变成最后一个索引,设置下一页按钮如果索引大于最大的索引就变成0

这样就完成的这个神仙见了会流泪的最最最基础的onclick图片切换啦O(∩_∩)O

来人,上代码!
(旁白):是,老爷(图片就自己随便找几张咯)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
   
            padding: 0<
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值