js图片轮换经典小例子

使用js脚本实现图片轮换、图片轮播的小例子，纯js实现的，感觉不错，收藏下。

例子，js脚本实现图片轮换代码。


<script type="text/javascript">

var NowFrame = 1; //初始化显示第几张

var MaxFrame = 3; //最大显示几张

function show() {

for (var i = 1; i < (MaxFrame + 1); i++) {

if (i == NowFrame)

document.getElementById(‘div‘ + NowFrame).style.display = ‘‘; //当前图片显示

else

document.getElementById(‘div‘ + i).style.display = ‘none‘; //其他的图片隐藏

}

{ www.jbxue.com

if (NowFrame == MaxFrame) //定义下一张显示的图片

NowFrame = 1;

else

NowFrame++;

}

theTimer = setTimeout(‘show()‘, 1000); //设置定时器，显示下一张显示的图片

}

</script>

</head>

<body >

<form id="form1" runat="server">

<div id="tupianlunhuan">

<img  src="../images/5.png" style="display: none;" id="div1" border="0"/>

<img  src="../images/1.jpg" style="display: none;" id="div2" border="0"/>

<img  src="../images/3.png" style="display: none;" id="div3" border="0"/>

</div>

</form>

</body>

您可能感兴趣的文章：


js图片轮换经典小例子,码迷,mamicode.com

时间： 2024-08-02 06:57:47

js图片轮换经典小例子的相关文章

js图片轮换显示实例

用js脚本实现图片轮换显示,很简单的小例子,特此分享. 1,js代码部分,图片轮换代码. <script language="JavaScript"> var imgUrl=new Array(); var imgLink=new Array(); var imgText=new Array(); var picNum=0; imgUrl[1]="图片地址一"; imgLink[1]="链接1"; imgText[1]="标

js图片轮换

本文介绍用javascript制作图片轮换效果,原理很简单,就是设置延时执行一个切换函数,函数里面是先设置下面的缩略图列表的白框样式,再设置上面大图的src属性,在IE中显示很正常,可是在FF中会有变成先显示上面的大图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

js学习总结----经典小案例之选项卡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,ul,li{ margin:0; padding: 0; font-family: Arial; font-size:12px; } ul li{ list-style:none

js赋值符号“=”的小例子

1 var obj1={x:5}; 2 var obj2=obj1; 3 obj1.a=obj1={x:6}; 4 console.log(obj1.a); 5 console.log(obj2.a); 为什么obj1.a 会是undefined呢? 为什么obj2.a会是{x:6}?

js链式动画小例子

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链式动画</title> <style> * { margin: 0; padding: 0; } #odiv { width: 100px; height: 100px; background: pink; opacity: 0.5; } </style> </hea

js学习总结----经典小案例之表格排序

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-family:"微软雅黑";font-size:14px

js小例子（标签页）

运用js写的一个小例子,实现点击不同的标签出现不同的内容: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta chaset="utf-8"> 5 <script> 6 function nav(obj, x) 7 { 8 var a = obj.parentNode.parentNode.children; 9 for(var i =0;i<a.length;i++) { 10 a[

图片轮换特效

1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>带小图标

特殊的图片轮换特效

特殊的图片轮换特效 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset=&quo