利用JS简单制作的图片的切换

做网页时需要利用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> 

时间: 2024-08-26 13:23:19

利用JS简单制作的图片的切换的相关文章

Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)_实用技巧

本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial

简单实用的图片幻灯切换效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简单实用的图片幻灯切换效果</tit

Flash AS3简单制作百叶窗图片特效

Flash AS3简单制作百叶窗图片特效,适合初学者的教程,希望大家能练习! 图片百叶窗特效: 制作过程: 任意选择一个图片,当做本例动画中的图片,我们将使该图片达到百叶窗动画特效. 然后按Ctrl+J修改文档的属性,设置任何颜色为背景都可以,大小调整到和自己选择的图的大小一样大就可以了,幁频设置为38fps 就可以. 把图层1命名为photo,把外部准备的图片导入到舞台,然后按F8转变为原件,类型是影片剪辑, 然后拖拽到舞台,打开属性面板,设置如下:

Flash AS3简单制作美女图片缓动特效gif动画

  Flash AS3简单制作美女图片缓动特效gif动画过程,本教程主要适合初学者,希望大家练习,可以先看下相关文章:Flash AS3简单制作图片变成百叶窗特效教程 制作步骤: 新建立文档,调整文档属性,如下图设置: 和上一个实例教程一样,导入一个图片是影片剪辑,然后制作一个文字按钮,设置如下: 然后再建立一个新图层,在第一帧中添加如下代码: 代码如下: import fl.transitions.*; import fl.transitions.easing.*; myButton.addE

photoshop利用风滤镜制作极光图片教程

给各位photoshop软件的使用者们来详细的解析分享一下利用风滤镜制作极光图片的教程. 教程分享: 1.打开PS软件,按Ctrl + N 新建,大小为1024 * 1200像素,分辨率为72,如下图,然后确定.   2.用油漆桶工具把背景填充黑色,如下图.   3.选择钢笔工具,勾出下图所示的闭合路径,重点是下部分的弧度要自然,顶部的可以随意闭合.   4.进入通道面板,点击面板下面的新建按钮,新建一个通道,如下图.   5.按字母键"D"把前,背景颜色恢复到默认的黑白,然后把前景色

一段非常简单的让图片自动切换js代码

js 1<script language =javascript > 2var curIndex=0; 3//时间间隔 单位毫秒 4var timeInterval=1000; 5var arr=new Array(); 6arr[0]="1.jpg"; 7arr[1]="2.jpg"; 8arr[2]="3.jpg"; 9arr[3]="4.jpg";10arr[4]="5.jpg";11ar

一段非常简单的让图片自动切换js代码_图象特效

复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5

JS鼠标滑过图片时切换图片实现思路_javascript技巧

在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里小编说说这是怎么实现的. 在写Javascript代码前我们必须要有实验的HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery deal images</t

快速简单制作非主流图片教程

本文章来告诉你如何利用秀秀图软件来制作非主流照片哦,如果你喜欢这款软件制作出来的照片效果可以进来免费下载. 图1 先看看效果吧! 图2 图3 好,下面开始示范步骤过程. 首先运行"美图秀秀"软件打开照片. 图4 2.选择"场景"--"动画场景"功能. 图5 3.在"动画场景"编辑框中自由调整图片位置.速度等,还可以更换自己喜欢的图片哦. 图6 4.预览图片效果后,就可以保存啦! 图7 最后如果你没安装秀秀图软件,就到这里下载吧