不要问为什么起这个看起来很长的标题,因为我也不知道为什么
下面进入正题:
因为我们的标题是最最最基础的,所以我们先来第一步,创建一个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<