js简单的图片切换

简单的项目 颜鸿

图片切换时使用了我们学到的那个document的属性来进行实现的

一、我们要先创建好网页的布局,我们用到的标签有

      1.img图片的标签

      2.按钮的标签

t1.PNG

二、网页布局好后就开始使用js代码来实现图片切换的效果

首先我们要获取到要是用到的那个标签节点对象

就是使用我们学到的那个document的对象来获取到节点对象

t2.PNG

因为img是一组的节点对象,所以获取到节点对象后再给一个数组的下标

然后我们还要创建一个数组来存储图片

t3.PNG

三、就是开始实现按钮的点击事件

首先是上一页的点击事件,首先创建一个函数,这个函数就是点击事件要调用的函数

我们定义一个变量用来存储自加自减

然后使用到上一张的函数里面进行自减,然后使用判断,判断是否是小于0,然后进行初始化为数组最大的下标

使用img调用src属性然后把数组上面进行自减的下标赋给它

t4.PNG

这个是的下一张的点击事件,首先创建一个函数,这个函数就是点击事件要调用的函数

直接调用index

然后使用到上一张的函数里面进行自减,然后使用判断,判断是否是大于下标最大的,大于的话就执行里面的初始化为0,然后进行初始化为数组最大的下标

使用img调用src属性然后把数组上面进行自加的下标赋给它

t5.PNG


好了,以上就是实现页面切换的代码

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :