利用JS进行图片的切换即特效展示图片

 更新时间:2013年12月03日 17:24:32   作者:  
做网页时需要利用JS进行特效展示图片,下面是利用JS简单制作的图片的切换,需要的朋友可以了解下
在网页制作的时候,需要利用JS进行特效展示图片,下面是利用JS简单制作的图片的切换。
复制代码 代码如下:

<html>

<head>

<script type="JavaScript">

var srr = new Array('图片一', '图片二', '图片三', '图片四');//利用JS中内置的数组,进行数据的存储
var s = 0;
function chage() {
var img = document.getElementById('img1');
if (s <srr.length-1 ) {
s++;
}
else {
s = 0;
}
img.setAttribute('src', srr[s]);
}
function diaoyong() {
setInterval(chage, 1000);
}

</script>

</head>

<body onLoad="diaoyong();">

</body>

</html>

相关文章

  • 动态加载js和css(外部文件)

    动态加载js和css(外部文件)

    本文详细介绍下,如何动态加载外部js文件及js;动态加载外部css样式及css样式,感兴趣的朋友可以参考下哈,希望对你学习js有所帮助
    2013-04-04
  • IE6下通过a标签点击切换图片的问题

    IE6下通过a标签点击切换图片的问题

    IE6已经让人恶心很久了, Google旗下Youtube决定在3月13日起停止对IE6的支持. 但愿能加速IE6更换的速度.
    2010-11-11
  • 移动端手指放大缩小插件与js源码

    移动端手指放大缩小插件与js源码

    这篇文章主要介绍了移动端手指放大缩小插件与js源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 关于js new Date() 出现NaN 的分析

    关于js new Date() 出现NaN 的分析

    在一个项目中需要进行日期的格式化,后台传到前端是时间的整数(Date.getTime),当后台数据返回字符串时,发现转换日期时在ie下变成NaN,但是真的是这样吗?接下来我们慢慢分析
    2012-10-10
  • 原生js页面滚动延迟加载图片

    原生js页面滚动延迟加载图片

    这篇文章主要介绍了原生js页面滚动延迟加载图片的相关资料,现在瀑布流效果大行其道,各种网站都有应用,尤其是专业的图片类型的网站,感兴趣的朋友可以参考下
    2015-12-12
  • 浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结

    浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结

    下面小编就为大家分享一篇浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结。小编觉得写的非常不错,需要的朋友可以过来参考一下
    2016-03-03
  • JavaScript中的await函数使用小结

    JavaScript中的await函数使用小结

    async 函数是 AsyncFunction 构造函数的实例,并且其中允许使用 await 关键字,async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为,而无需刻意地链式调用 promise,这篇文章主要介绍了JavaScript中的await,需要的朋友可以参考下
    2024-01-01
  • JS实现横向轮播图(中级版)

    JS实现横向轮播图(中级版)

    这篇文章主要为大家详细介绍了JS实现横向轮播图的中级版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 一文详解MySQL5.7与MySQL8之间的区别

    一文详解MySQL5.7与MySQL8之间的区别

    MySQL作为最常用的开源关系型数据库管理系统之一,一直在不断发展和改进,其中,MySQL 5.7和MySQL 8是两个备受关注的版本,它们之间存在一些关键的差异,本文将深入探讨这两个版本之间的主要差异,需要的朋友可以参考下
    2023-11-11
  • 微信小程序如何实现数据共享与方法共享详解

    微信小程序如何实现数据共享与方法共享详解

    这篇文章主要给大家介绍了关于微信小程序如何实现数据共享与方法共享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01

最新评论