javascript如何让图片自动变换

方法:1、创建图片路径数组;2、用timeInterval定义切换时间,setInterval()设置时间定时执行函数;3、获得img对象,设初始curIndex,if语句比较图片名称,实现不断改变图片名称进而改变图片路径,实现切换效果。

javascript如何让图片自动变换

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

JavaScript让图片自动变换的方法

1、新建一个html文件,命名为test.html,用于讲解怎样用javascript实现图片定时切换。

QQ图片20210408092203.png

立即学习“Java免费学习笔记(深入)”;

2、在test.html,使用img标签创建一张图片的显示,并且设置其id属性为obj,方便下面获得该元素对象。

QQ图片20210408092203.png

3、在test.html页面的script标签内,使用new Array()创建一个图片路径的数组,里面放三张图片的文件名。

QQ图片20210408092203.png

4、在test.html页面的script标签内,使用变量timeInterval定义图片切换的时间为1秒,通过setInterval()定时器方法设置每秒钟执行一次changeImg()函数。

QQ图片20210408092203.png

5、在changeImg()函数内,使用document.getElementById()方法获得img对象,设置一个初始curIndex变量,通过if语句比较图片的名称,实现不断改变图片的名称。

注:图片的名称必须为0,1,2等有序的数字。

QQ图片20210408092722.png

6、在changeImg()函数内,将上一步获得的图片名称用来改变img的图片路径,最终实现图片的定时切换。

QQ图片20210408092722.png

更多编程相关知识,请访问:编程视频!!

以上就是javascript如何让图片自动变换的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2715834.html

(0)
上一篇 2025年3月7日 21:48:58
下一篇 2025年3月1日 09:23:21

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 教你一招网课作业如何复制粘贴

    本文将教你网课作业复制粘贴的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 早上起来睁开眼,诶呀,考试周又到了。各个科目的期中作业都在各自的平台陆续发布了。各种乱七八糟的科目,让人烦不胜烦。 以iwrite英语教学平…

    2025年3月7日 编程技术
    200
  • JavaScript如何加音乐

    JavaScript添加音乐的方法:首先创建一个js示例文件;然后定义一个autoPlay方法;最后通过“myAuto.src=’/media/v2/sss.mp3′;”方式引入音乐文件即可。 本文操作环境:wind…

    2025年3月7日
    200
  • javascript语言的组成有哪些

    javascript语言的组成有:1、ECMAScript部分,指JavaScript的核心,描述了语言的基本语法和数据类型;2、DOM部分,指文档对象模型;3、BOM部分,指浏览器对象模型。 本文操作环境:windows7系统、javas…

    2025年3月7日
    200
  • javascript数组去重复的方法

    javascript数组去重复的方法:1、利用“indexOf()”方法去除重复值;2、利用splice方法去除重复值;3、利用es6新增的集合Set去除重复值。 本文操作环境:windows7系统、javascript1.8.5版、Del…

    2025年3月7日
    200
  • javascript语言有哪些特点

    javascript语言的特点:1、JavaScript是一种解释型的脚本语言;2、一种基于对象的脚本语言;3、采用的是弱类型的变量类型;4、一种采用事件驱动的脚本语言;5、依赖于操作系统,仅需要浏览器的支持。 本文操作环境:windows…

    2025年3月7日
    200
  • javascript怎么改变元素的背景颜色

    javascript改变元素的背景颜色的方法:首先创建p元素,在里面写上hello;然后为这个p元素来设置背景颜色;最后在浏览器中变化即可。 本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑。 ja…

    2025年3月7日 编程技术
    200
  • javascript如何设置时间

    javascript设置时间的方法:1、【setFullYear()】方法设置日期对象的年份;2、【setMonth()】方法设置日期对象的月份;3、【setDate()】方法设置日期对象的日。 本教程操作环境:windows7系统、jav…

    2025年3月7日
    200
  • javascript如何显示和隐藏div

    javascript显示隐藏div的方法:首先新建文件,并创建button按钮;然后创建隐藏的div,并给div设置隐藏的样式;最后为button按钮添加一个点击后隐藏事件。 本教程操作环境:windows7系统、javascript1.8…

    2025年3月7日 编程技术
    200
  • javascript如何给div设置高度

    javascript给div设置高度的方法:首先新建项目;然后修改html文件中div的style中值来修改div的高度;最后运行项目即可。 本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑。 ja…

    2025年3月7日 编程技术
    200
  • JavaScript常用属性方法有哪些

    JavaScript常用属性方法有:1、JS中的注释为【//】;2、字符型转换成数值型【parseInt()】;3、取字符串长度【length】;4、声明变量使用var;5、判断语句结构【if(condition){}else{}】。 本教…

    2025年3月7日
    200

发表回复

登录后才能评论