js图片自动切换效果处理代码

 1 <script language =javascript >
 2 var curIndex=0;
 3 //时间间隔 单位毫秒
 4 var timeInterval=1000;
 5 var arr=new Array();
 6 arr[0]="1.jpg";
 7 arr[1]="2.jpg";
 8 arr[2]="3.jpg";
 9 arr[3]="4.jpg";
10 arr[4]="5.jpg";
11 arr[5]="6.jpg";
12 arr[6]="7.jpg";
13 setInterval(changeImg,timeInterval);
14 function changeImg()
15 {
16 var obj=document.getElementById("obj");
17 if (curIndex==arr.length-1)
18 {
19 curIndex=0;
20 }
21 else
22 {
23 curIndex+=1;
24 }
25 obj.src=arr[curIndex];
26 }
27 </script>
28 <img id=obj src ="1.jpg" border =0 /> 
时间: 2024-10-11 01:07:21

js图片自动切换效果处理代码的相关文章

[JS]图片自动切换效果(学习笔记)

上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/.container, .container * {    margin: 0;    padding: 0;}.container {    width: 1005px;    height: 395px;    float: right;    overflow: hidden;    position: relative;    rig

js实现图片自动切换效果。

js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval(test, 2000); var array = new Array(); var index = 0; var array = new Array("../../Content/images/3s1hj_kqzew4k2ozbhs2dwgfjeg5sckzsew_780x520.jpg"

一款常用的漂亮的JS图片滑动切换效果

<HTML> <HEAD> <TITLE>一款常用的漂亮的JS图片滑动切换效果丨石家庄展柜制作|</TITLE> <style> BODY { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } UL { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PAD

JS图片自动轮换效果实现

今天不在状态,五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片 下面是具体的代码,还是比较简单的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

JS图片自动和可控的轮播切换特效

详细内容请点击 点击这里查看效果: http://hovertree.com/texiao/js/1.htm HTML文件代码如下:  <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS图片自动和可控的轮播切换特效 - 何问起 HoverTree</ti

JS图片Switchable切换大集合

JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图片时候 png图片自动转换成jpg 所以左右按钮有透明,但是也没有关系,我们最主要的是看看效果是什么样的,至于图片大家可以替换.下面看看默认配置项吧!   container '',     外层容器 必填项 默认为空  contentCls  '.list',     内容所在的容器 默认为'.l

手机端图片滑动切换效果

最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环切换等等,具体可以拿demo代码自己本地试试,注意只支持手机端哦 大概思路:通过touchstart.touchmove.touchend 三个事件加上css3的3d变化效果配合,实现滑动切换图片, 开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作

基于jquery鼠标点击图片翻开切换效果

基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <img src="images/1.jpeg" alt="1" /> <img src="images/2.jpeg" alt="2" /> <img s

图片旋转切换效果

<!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> <meta http-equiv="Content-