js实现简单图片切换快捷键,js实现简单图片切换功能

js实现简单图片切换快捷键,js实现简单图片切换功能,js实现简单图片切换

本文主要详细介绍js实现简单的图片切换。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。

本文分享JavaScript在图片间切换的具体代码,供大家参考。具体内容如下

代码的主要思路:

1.首先,绑定“下一个”和“上一个”按钮,点击响应事件;

2.获取img标签对象,用于修改src属性值,实现图片的切换;

3.切换图片本质上是修改img标签中src属性的值;

4.创建一个数组来保存图片。这样在画面切换的过程中操作起来会更加方便。只需操作数组的索引。如果要切换到下一个,只需设置imgar [0]-imgar [1]即可;

5.创建一个变量来保存当前显示图片的索引,这样更容易操作图片;

6.需要注意的是,如果当前显示的图片是最后一张,下一张会自动跳回第一张;同样,如果当前显示的图片是第一张,前一张会自动跳回最后一张;

7.要设置顶部文本,先获取对应的P label对象;

8.通过修改P标签中的文本,可以实现顶部文本的实时转换;

!文档类型html

html lang='en '

meta charset='UTF-8 '

图片切换练习/标题

style type='text/css '

* {

边距:0;

填充:0;

}

#外部{

宽度:500px

边距:50px自动;

填充:30px

背景色:海蓝宝石;

}

/风格

脚本类型='文本/javascript '

window.onload=function () {

/**

*点击按钮切换图片。

*/

//3.获取img标签

var img=document . getelementsbytagname(' img ')[0];

//5.创建一个数组来保存图片的路径。

var imgArr=['img/1.jpg ',' img/2.jpg ',' img/3.jpg ',' img/4.jpg ',' img/5 . jpg '];

//6.创建一个变量来保存当前显示图片的索引。

var指数=0;//默认显示第一个

//8.获取具有id信息的元素

var info=document . getelementbyid(' info ');

//9,设置提示文本

info . innerhtml=' total ' imgarr . length '图片,这是'(索引1)'图片;

//1.将click事件绑定到上一个按钮。

var prev=document . getelementbyid(' prev ');

prev.onclick=function () {

//7.当索引是第一个时,需要将索引设置为最后一个。因为采用了- index,所以索引设置为5。

if (index==0) {

指数=5;

}

指数=指数-1;

//4.切换图片本质上就是修改img中的src属性。

img . src=im garr[index];

//9,设置提示文本

info . innerhtml=' total ' imgarr . length '图片,这是'(索引1)'图片;

}

//2.将click事件绑定到next按钮。

var next=document . getelementbyid(' next ');

next.onclick=function () {

//7.当索引是最后一个时,需要将索引设置为第一个。由于采用了索引,所以索引设置为-1。

if (index==4) {

index=-1;

}

指数=指数1;

//4.切换图片本质上就是修改img中的src属性。

img . src=im garr[index];

//9,设置提示文本

info . innerhtml=' total ' imgarr . length '图片,这是'(索引1)'图片;

}

}

/脚本

/头

身体

div id=外部对齐='居中'

p id=信息/p

Img src='img/1.jpg' alt='棒冰'/br/

按钮id='上一个'上一个/按钮

按钮id='下一步'下一步/按钮

/div

/body

/html

完成后的效果:每点击一次下一张或上一张图片,图片就会切换,顶部的提示文字也会相应变化。

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令
  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法,使用js实现数据格式化
  • js选择日期,js日期选择控件,JS实现时间选择器
  • js轮播图视频教程,html5幻灯片图片轮播,js实现幻灯片轮播图
  • js轮播图菜鸟教程,js实现轮播图原理及示例
  • js轮播图菜鸟教程,js实现轮播图原理及示例,JS实现轮播图效果的3种简单方法
  • js获取dom节点的方法,js移除dom元素,JS实现DOM删除节点操作示例
  • js自动复制,网页一键复制,JS实现一键复制
  • js自动切换图片效果,js实现图片切换效果怎么做
  • js用数组实现图片切换,js中图片切换效果怎么实现,js实现图片数组中图片切换效果
  • js星空特效,js流星雨特效,js实现星星闪特效
  • js日期加减算天数,js实现日期按月份加减
  • js日期加减算天数,js实现日期按月份加减,js中日期的加减法
  • 留言与评论(共有 条评论)
       
    验证码: