DW制作自动切换图js代码

合集下载

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果上一次在我的文库中分享了点击按钮,图片左右切换轮播效果代码,今天主要是分享【鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码】。

最后的效果如下:Html代码部分:<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>图片轮播效果制作</title><link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/style.js"></script></head><body><div class="banner"><ul class="pic"><li><a href="#"><img src="images/1.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/2.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/3.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/4.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/5.jpg" alt="美女" width="350" height="495"></a></li></ul><ul class="anniu"><li class="on"></li><li></li><li></li><li></li><li></li></ul><ul class="lr"><li class="pre"><a href="#"> < </a></li><li class="next"><a href="#"> > </a></li></ul></div></body></html>Css代码部分:*{margin:0px;padding:0px}li{list-style:none}a{text-decoration:none}img{border:0px}.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}.banner .pic{width:9999px;height:495px}.banner .pic li{width:350px;height:495px;float:left}.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline; cursor:pointer;border-radius:100%}.banner .anniu li.on{background:red}.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}.banner .lr a{color:white}.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}Javascript代码部分:$(function(){//鼠标滑过banner,左右按钮进行显示和隐藏$(".banner").hover(function(){$(".lr").show();},function(){$(".lr").hide();});//点击下面的小按钮,图片进行左右切换效果$(".anniu li").click(function(){$(this).addClass("on").siblings().removeClass("on");var num=$(this).index();$(".pic").animate({marginLeft:-350*num},"slow");});//图片自动轮播效果var a=0;var automatic=setInterval(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");},6000);//点击左右按钮,图片进行切换效果$(".pre").click(function(){a--;a=(a+5)%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});$(".next").click(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});});。

Html、js图片轮播代码

Html、js图片轮播代码

Html、js图片轮播代码现在基本上每个网站都有一个自动轮播的banner广告图,在没有任何按钮的情况下,图片在规定的时间内进行自动切换。

下面是html、js 图片轮播代码详情。

代码效果图实例:第一秒:第二秒:第三秒:详细代码如下:Html代码部分:<body><ul class="banner"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li></ul></body>Css代码部分:<style type="text/css">ul,li{margin:0px;padding:0px}li{list-style:none}.banner{width:630px;height:250px;margin:100px auto;overflow:hidden;cursor:pointer} </style>Javascript代码部分:<script type="text/javascript"src="jquery.js"></script><script type="text/javascript">$(function(){var timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)$(".banner li").hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)})})</script>【Jquery.js】是一个jquery库,只要百度一下搜索“jquery”下载这个文件就行。

JS图片屏幕旋转特效代码

JS图片屏幕旋转特效代码

JS图片旋转特效代码JS图片旋转代码,像屏幕一样围成柱体圆形的图片旋转特效,图片的高度和宽度可自设,图片路径也可自定义,还有旋转速度也可以自定义调节。

<body onLoad="Carousel()"><script type="text/javascript">var Car_Image_Width=320;var Car_Image_Height=275;var Car_Border=true;var Car_Border_Color="white";var Car_Speed=4;var Car_Direction=true;var Car_NoOfSides=8;Car_Image_Sources=new Array("/jscss/demoimg/wall_s2.jpg","","/jscss/demoimg/wall_s3.jpg","","/jscss/demoimg/wall_s4.jpg","", //this slide isn't linked"/jscss/demoimg/wall_s7.jpg","" // NOTE No comma after last line);CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);C_Coef=new Array(3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;C_Pre_Img=new Array(Car_Image_Sources.length);varC_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_T otalW,C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;function Carousel(){if(document.getElementById){for(i=0;i<Car_Image_Sources.length;i+=2){C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]} C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;Car_Div=document.getElementById("Carousel");for(i=0;i<C_HalfNo;i++){CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);CW_I[i].style.position="absolute";CW_I[i].style.top=0+"px";CW_I[i].style.height=Car_Image_Height+"px";if(Car_Border){CW_I[i].style.borderStyle="solid";CW_I[i].style.borderWidth=1+"px";CW_I[i].style.borderColor=Car_Border_Color}CW_I[i].src=Car_Image_Sources[2*i];CW_I[i].lnk=Car_Image_Sources[2*i+1];CW_I[i].onclick=C_LdLnk;CW_I[i].onmouseover=C_Stp;CW_I[i].onmouseout=C_Rstrt}CarImages()}}function CarImages(){if(!C_Stppd){C_TotalW=0;for(i=0;i<C_HalfNo;i++){C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_ Width);C_TotalW+=C_ClcW[i]}C_LeftOffset=(C_MaxW-C_TotalW)/2;for(i=0;i<C_HalfNo;i++){CW_I[i].style.left=C_LeftOffset+"px";CW_I[i].style.width=C_ClcW[i]+"px";C_LeftOffset+=C_ClcW[i]}C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){ if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;if(Car_Direction){CW_I[C_HalfNo]=CW_I[0];for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];CW_I[0]=CW_I[C_HalfNo];CW_I[0].src=Car_Image_Sources[C_CrImg];CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}} setTimeout("CarImages()",50)}function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}function C_Rstrt(){C_Stppd=false}</script>吕延良博客整理发布,更多的网站特效和广大站长分享讨论!<div id="Carousel" style="position:relative"></div>。

图片轮播代码

图片轮播代码
<li><img src="lunbo-img/liehuo_net_600x400_4.jpg" width="600" height="400" /></li>
<li><img src="lunbo-img/liehuo_net_600x400_5.jpg" width="600" height="401" /></li>
<li><img src="lunbo-img/liehuo_net_600x400_2.jpg" width="600" height="400" /></li>
<li><img src="lunbo-img/liehuo_net_600x400_3.jpg" width="600" height="400" /></li>
简单的图片轮播
效果图:
图片轮播DW代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
height:320px;
}
#pic ul{
list-style-type:none;
position:absolute;

JavaScript实现图像轮播特效教程

JavaScript实现图像轮播特效教程

JavaScript实现图像轮播特效教程章节一:引言在现代网页设计中,图像轮播特效是非常常见的元素之一。

通过图像轮播特效,可以使网页更加动态、吸引人,提升用户体验。

本教程将介绍如何使用JavaScript实现图像轮播特效,并提供详细的步骤和示例代码。

章节二:基本结构首先,我们需要准备好轮播图的基本结构。

在HTML文件中,创建一个容器元素,用于包裹轮播图的图片和导航按钮。

然后,给容器元素添加一个唯一的ID,方便在JavaScript中进行操作。

章节三:样式设计接下来,我们需要为轮播图的容器元素和其中的图片设置样式。

使用CSS,可以设置容器元素的宽度和高度,以及图片的显示方式和过渡效果。

通过设置适当的样式,可以使轮播图在页面中居中显示,并可以根据需要进行自定义的设计。

章节四:添加JavaScript代码再接下来,我们需要使用JavaScript编写轮播图的逻辑代码。

首先,使用DOM操作获取到容器元素和其中的图片元素。

然后,使用数组或者类数组对象保存每张图片的路径或地址。

接下来,定义一个变量来存储当前显示的图片的索引。

然后,编写一个函数来实现图像切换的效果。

在函数中,通过改变图片元素的样式或属性,实现图片的切换。

同时,更新当前显示的图片的索引,以便进行下一次切换。

章节五:自动轮播功能除了手动切换图片,我们还可以添加自动轮播的功能。

使用JavaScript的定时器函数,可以定期触发图片切换的函数。

通过设置合适的时间间隔,可以实现自动轮播的效果。

同时,需要添加鼠标移入和移出事件,以便在用户鼠标悬停在图片上时停止轮播,鼠标离开时继续轮播。

章节六:导航按钮如果希望用户可以通过导航按钮来手动控制轮播图的切换,我们还需要添加导航按钮的功能。

在HTML文件中,创建相应数量的导航按钮,并为每个按钮设置一个特定的类名或索引属性。

在JavaScript中,使用事件委托的方式,监听导航按钮的点击事件。

当用户点击某个导航按钮时,获取该按钮的索引,然后调用图片切换函数,显示对应索引的图片。

Dreamweaver基础教程—使用Dreamweaver开发JavaScript脚本

Dreamweaver基础教程—使用Dreamweaver开发JavaScript脚本

使用Dreamweaver开发JavaScript脚本我们已经介绍过 Web 前端设计的逻辑层概念,它主要集中在 JavaScript 技术上。

相对于 HTML 和 CSS 技术的完美支持,Dreamweaver 对于 JavaScript 技术的支持可以说是姗姗来迟, 且比较有限。

早期的Dreamweaver 使用“行为”概念打包常用的JavaScript功能块,而对于JavaScript语言 本身的支持基本上没有,仅能够分色显示 JavaScript 关键字。

从 Dreamweaver CS3 版本开始, Adobe把过多的精力集中在Ajax框架的开发上,忽略了基础性技术支持。

而Dreamweaver 所开 发的 Spry框架虽然功能很强大,但是却无法与 jQuery、Prototype等基础性 Ajax 框架相比较。

用Adobe官方解释,Spry技术是为Web设计师开发的Ajax框架,而不是为Web程序员开发的 基础性架构,但是它与Ext JS和YUI等框架相比,界面效果和交互性功能方面又显得比较粗糙 和弱小。

升级到Dreamweaver CS4版本后,Adobe开始把精力放在JavaScript核心技术支持上, 现在能够支持JavaScript代码核心智能提示,并提供了几个实用工具。

坦率地讲,Dreamweaver 不是开发 JavaScript 的最佳工具,但是作为一款 Web 综合编辑环 境,对于广大初学者来说仍然是首选工具,如果结合Dreamweaver 所附带的Spry技术框架,相 信你能够轻松设计各种常用脚本功能。

本章将详细讲解Dreamweaver 如何支持JavaScript技术, 其中包括脚本服务、行为和Spry技术框架。

1 Dreamweaver 中的 JavaScript在Dreamweaver CS4版本之前,Dreamweaver 仅能够支持JavaScript代码的分色显示,且功 能有限。

JS图片自动切换代码

JS图片自动切换代码

var widths=980; //焦点图片宽var w=2;var widthss=widths+w;var heights=195; //焦点图片高var heightss=heightss+w;var heightt=20;var counts=6; //总条数//img1=new Image();在这里是声明了一个图片元素的对象//后面是对图像的属性进行赋值或设置,如imgs.src="xxxx.jpg"是指定图片的索引地址.//这个代码一般用于head区,用于预加载图片,即加快图片显示.//只有用new Images()得到的图片IE7才认,//而IE6和firefox可认得imgUrl[1]="/y9q9ms7lbgbt.jpg";得到的图片img1=new Image();img1.src='style/img/top1.jpg';url1=new Image();url1.src='';img2=new Image();img2.src='style/img/top2.jpg';url2=new Image();url2.src='';img3=new Image();img3.src='style/img/top3.jpg';url3=new Image();url3.src='';img4=new Image();img4.src='style/img/top4.jpg';url4=new Image();url4.src='';img5=new Image();img5.src='style/img/top5.jpg';url5=new Image();url5.src='';img6=new Image();img6.src='style/img/top6.jpg';url6=new Image();url6.src='';var nn=1; //当前所显示的滚动图var key=0; //标识是否为第一次开始执行var tt; //标识作用function change_img(){if(key==0){key=1;} //如果第一次执行KEY=1,表示已经执行过一次了。

DW网页制作常用代码

DW网页制作常用代码
看来需要的话,我们只能直接进入源文件更改了。
<hr color="对应颜色的代码">
--------制作可以关闭当前窗口的链接--------
这里我们可以先输入用来标示的文字“关闭窗口”,用鼠标拖动选中它,在“Link”输入框中键入“/”,同时切入源代码窗口,在链接代码中键入该事件-onclick=“window.close(); return false;”。
<Link Rel="SHORTCUT ICON" href="http://图片的地址(注意与刚才的目录对应)">
其中的“SHORTCUT ICON”即为该图标的名称。当然如果用户使用IE5或以上版本浏览时,就更简单了,只需将图片上传到网站根目录下,即可自动识别!
--------为图片添加指定颜色的边框--------
-->< /script>
--------加注释内容--------
注释内容,顾名思义只是作为说明内容出现的,因此在浏览时不会出现在网页中。它的作用是对某些重要或复杂代码进行必要的标示,以更方便快捷的找到。
进入“Object”面板的“Invisibel”部分(即不可见元素),选择插入“Comment”按钮,
<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;
<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;

dw代码大全1

dw代码大全1
HTML特效代码1。忽视右键
<body oncontextmenu="return false">

<body style="overflow-y:hidden">
2。加入背景音乐
IE:<bgsound src="*.mid" loop=infinite>
NS:<embed src="*.mid" autostart=true hidden=true loop=true>
if(event.shiftKey)
alert("禁止按Shift键!"); //可以换成ALT CTRL
}
document.onkeydown=look;
</script>
29. 网页不会被缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
// --></SCRIPT>
25. 网页将不能被另存为
<noscript><iframe src=*.html></iframe></noscript>
26. 查看网页源代码
<input type=button value=查看网页源代码 onclick="window.location = "view-source:"+ """>
height:115px;z-index:1">

DW常用代码

DW常用代码

dw中常用的特效代码参考:/1.让浏览器窗口永远都不出现滚动条。

〈body style="overflow-x:hidden;overflow-y:hidden"〉或〈body style="overflow:hidden"〉或〈body scroll=no〉没有水平滚动条〈body style="overflow-x:hidden"〉没有垂直滚动条〈body style="overflow-y:hidden"〉2,如何给图片抖动怎做的.〈SCRIPT language=javascript1.2〉〈!--var rector=2var stopit=0var a=1var count=0function init(which){stopit=0shake=whichshake.style.left=0shake.style.top=0}function rattleimage(){if ((!document.all&&!document.getElementById)||stopit==1||count==100)returncount++if (a==1){shake.style.top=parseInt(shake.style.top)+rector}else if (a==2){shake.style.left=parseInt(shake.style.left)+rector}else if (a==3){shake.style.top=parseInt(shake.style.top)-rector}else{shake.style.left=parseInt(shake.style.left)-rector}if (a〈4)a++elsea=1setTimeout("rattleimage()",50)}function stoprattle(which){stopit=1count=0which.style.left=0which.style.top=0}//--〉〈/SCRIPT〉〈style〉.shakeimage {POSITION: relative}〈/style〉〈img src="图片的路径" onmouseout=stoprattle(this) onmouseover=init(this);rattleimage()class=shakeimage〉4,在DW如何给水平线加颜色。

Dreamweaver视图切换的技巧

Dreamweaver视图切换的技巧

Dreamweaver视图切换的技巧Dreamweaver视图切换的技巧我们为大家收集整理了关于Dreamweaver视图切换,以方便大家参考。

您可以在“文档”窗口中通过“代码”视图、“拆分代码”视图、“设计”视图、“代码”视图和“设计”视图(拆分视图)或“实时”视图查看文档。

您还可以选择水平或垂直查看拆分“代码”视图或代码和“设计”视图。

(默认是水平显示。

)切换到“代码”视图请执行下列操作之一:选择“查看”>“代码”。

在“文档”工具栏中,单击“显示“代码”视图”按钮。

切换到拆分“代码”视图拆分“代码”视图将文档拆分为两部分,以便您可以同时对代码的这两部分进行操作。

选择“查看”>“拆分代码”。

注:如果您调整“文档”窗口或应用程序窗口的大小或更改工作区布局,则Dreamweaver 将保持拆分比例,以便两种视图始终可见。

切换到“设计”视图请执行下列操作之一:选择“查看”>“设计”。

在“文档”工具栏中,单击“显示“设计”视图”按钮。

显示“代码”视图和“设计”视图请执行下列操作之一:选择“查看”>“代码和设计”。

在“文档”工具栏中,单击“显示“代码”视图和“设计”视图”按钮。

默认情况下,“代码”视图显示在“文档”窗口顶部,“设计”视图显示在底部。

若要使“设计”视图显示在顶部,请选择“查看”>“顶部的.“设计”视图”。

注:如果您调整“文档”窗口或应用程序窗口的大小或更改工作区布局,则Dreamweaver 将保持拆分比例,以便两种视图始终可见。

在“代码”视图与“设计”视图之间切换按 Ctrl+反引号 (`)。

如果两个视图都显示在“文档”窗口中,此快捷键会将键盘焦点从一个视图移到另一个视图。

垂直拆分视图此选项只可用于拆分“代码”视图和代码和“设计”视图(拆分视图)。

对“代码”视图和“设计”视图禁用此选项。

确保您处于拆分“代码”视图(“查看”>“拆分代码”)或代码和“设计”视图(“查看”>“代码和设计”)。

Dreamweaver网页动态特效教程

Dreamweaver网页动态特效教程

Dreamweaver网页动态特效教程一、介绍Dreamweaver是一款强大的网页制作软件,其丰富的特效功能使得网页设计更加生动和具有吸引力。

本教程将介绍Dreamweaver中动态特效的应用,帮助读者快速制作出令人惊艳的网页动画效果。

二、背景知识在学习动态特效之前,有些基本知识是必要的。

首先,要了解网页中的HTML、CSS和Javascript三者之间的关系和作用。

这三个标准技术在网页设计中起到至关重要的作用。

其次,对于动态特效的实现需要掌握基本的CSS和Javascript知识,包括选择器、属性和方法等。

三、基本动态特效1. 图片轮播图片轮播效果在网页设计中非常常见,可以使网页变得更有吸引力。

在Dreamweaver中,使用Javascript的代码可以实现简单的轮播功能。

可以通过设置延时函数和计时器实现图片的自动切换,或者通过点击事件改变展示图片。

2. 导航动画网页导航条是用户浏览网站的重要组成部分,为了使导航更吸引眼球,可以通过动画效果提升用户体验。

在Dreamweaver中,可以通过设置CSS的过渡和动画属性来实现导航栏的动态效果,比如菜单项的放大、颜色渐变等。

四、高级动态特效1. 视差滚动效果视差滚动效果是一种通过不同层级元素的滚动速度差异来创建的效果,使得页面的深度和立体感更加突出。

在Dreamweaver中,可以通过使用CSS和Javascript的组合来实现这一效果。

通过控制元素的滚动速度和位置,可以使页面中的元素具有立体感,并且引导用户的注意力。

2. 瀑布流布局瀑布流布局是一种网页设计中常用的动态效果,常用于图片墙等场景。

在Dreamweaver中,可以通过CSS和Javascript结合来实现瀑布流布局。

通过计算每个元素的位置和高度,动态调整元素的位置,实现瀑布流效果。

五、实际案例为了更好地理解动态特效的应用,下面以一个实际案例来说明。

假设我们要制作一个产品展示页面,页面包含多张产品图片和文字描述。

dw常用代码

dw常用代码

插入的音频调整到开始就播放电子邮件连接网页关闭窗口表格中插入背景不能平铺表单,单选弄成可以多选模版用在框架中是不能选择整体的框架需改做好的表格的边框线[转][藏]DW代码一2008-11-19 12:54表格边框的显示与隐藏,是可以用frame参数来控制的。

请注意它只控制表格的边框图,而不影晌单元格。

只显示上边框 <table frame=above>只显示下边框 <table frame=below>只显示左、右边框 <table frame=vsides>只显示上、下边框 <table frame=hsides>只显示左边框 <table frame=lhs>只显示右边框 <table frame=rhs>不显示任何边框 <table frame=void>[滚动轴颜色——成功,具体的可以百度,也可以一一试验,以狐狸的经验,还是自己试出来的记的长……]< script language='Java script 1.2' type="text/java script "> </ script ><style type='text/css'> body{SCROLLBAR-FACE-COLOR:#E0F2DA;SCROLLBAR-HIGHLIGHT-COLOR: #BED0BA; SCROLLBAR-SHADOW-COLOR: #BED0BA; SCROLLBAR-3DLIGHT-COLOR: #E0F2DA; SCROLLBAR-ARROW-COLOR: #BED0BA; SCROLLBAR-TRACK-COLOR: #BED0BA; SCROLLBAR-DARKSHADOW-COLOR:#BED0BA}</style><style type="text/css"><!--页面过渡方式——成功插在<head>与</head>之间<meta http-equiv="Page-Exit"content="revealTrans(Duration=2,Transition=4)">Duration的值为网页动态过渡的时间,单位为秒。

行为-实验要求

行为-实验要求

Dreamweaver实验一、实验目的:1. 掌握DW中行为的概念、添加方式;2. 掌握DW中常用行为的应用,给网页添加动态效果;二、实验环境:Windows XP;EditPlus;Dreamweaver;Flash;Photoshop/Fireworks;三、实验内容及要求:在DW中创建站点,将其根目录设置为给定的“XW-XueHao-XingMing”,然后操作如下;1.行为:交换图像!(1).在网页XingWei-01.html中,进行如下操作:如下图所示,选中相册左边白色相框图片,将其命名为“Photo”;添加行为:1.给右侧图标“照片01”,添加行为,令鼠标经过它时,在左侧相框中显示照片“photo-1”;2.同样的,给右侧其它图标,添加行为,令鼠标经过它们时,左侧分别显示相应的照片;3.下面左图,为原始的网页效果;4.下面右图,为添加了行为后,鼠标经过第1个小图标时的网页效果;注意:若想让鼠标经过右侧图标时,显示出“小手”状态,可以给右侧每个图标添加一个空链接;注:添加上行为后,如下图所示,在HTML源文件中,自动添加了几行代码,不要对代码进行修改,否则效果会不起作用;2.行为:弹出信息!(1).在网页XingWei-02.html中,进行如下操作:给网页添加行为,使网页打开时,能弹出对话框,显示信息“欢迎光临国际在线!”,如下图所示;3.行为:拖动AP元素!(1).在网页XingWei-03.html中,进行如下操作:超链接的设置:1.给“显示原图”,添加超链接,令其打开网页“XingWei-03-LongMaoYuanTu.html”;2.令超链接,在新窗口中打开网页;第1个AP元素的设置:1.在网页中,绘制第1个AP元素,并将其命名为“T1”;注意:不要让AP元素嵌套在表格内部,要在网页中直接绘制,否则该行为有可能添加不上;2.在此AP元素中,插入拼图的第1个图片“LM-1.gif”;3.将AP元素“T1”的大小,设置成跟图片“LM-1.gif”的大小,一致;4.设置AP元素“T1”的位置为:左242像素,上112像素;其它4个AP元素的设置:1.同样的,再分别绘制其它4个AP元素;在其中插入相应的图片,设置大小,命名;2.设置AP元素“T2”的位置为:左408像素,上112像素;3.设置AP元素“T3”的位置为:左549像素,上112像素;4.设置AP元素“T4”的位置为:左242像素,上308像素;5.设置AP元素“T5”的位置为:左461像素,上308像素;添加行为,实现拖动图片的效果:1.首先,在DW工作区域左下角,选中<body>标签;(否则该行为,有可能添加不上)2.添加行为“拖动AP元素”,将AP元素设置为“T1”,具体参数的设置,如下图所示:3.同样的,再给其它4个AP元素,也添加行为“拖动AP元素”;行为添加完成后,在网页中,使用鼠标拖拽各个AP元素,将其摆放位置打乱;预览网页,原始效果如下左图所示,拼图完成后,效果如下右图所示;4.行为:改变属性!(1).在网页XingWei-04-A.html中,进行如下操作:如下图,在网页左上方,分别个以下3个不同颜色的图片,为其添加空链接;为每个图片添加行为,使得单击该图片时,令网页背景色,改变为相应的颜色;注:网页最外层的DIV标签的名称为:box;修改网页背景色、修改网页中文字的字体,都是修改DIV标签box中的相应属性;相关颜色值的名称,为:“# 图片名称”;在网页右上方,分别选中文字“黑体”、“宋体”,为其添加空链接;给文字“黑体”,添加行为,使得单击文字时,网页中的字体都变成黑体;给文字“宋体”,添加行为,使得单击文字时,网页中的字体都变成宋体;(2).在网页XingWei-04-B.html中,进行如下操作:选中网页右侧的大图片“photo1”,为其添加空链接;选中网页右侧的大图片“photo1”,为其添加行为,令鼠标经过该图片时,图片边框颜色变为墨绿色(#006600),如下图所示;再次选中右侧这个大图片“photo1”,为其添加行为,令鼠标离开该图片时,图片边框颜色变回白色(#FFFFFF),如下图所示;5.行为:效果!(1).图片增大/收缩效果:在网页XingWei-05-A.html中,进行如下操作:如下图所示,在网页左侧的单元格中,插入图片“index_03.jpg”;将图片命名为:“SS”,并为其添加空链接;添加行为,使得鼠标经过时,图片“SS”的大小,由40%变为100%;可以勾选“切换效果”,查看其显示效果有何不同;注:添加上“效果”行为后,首先,如下图所示,在站点根目录中,自动生成了一个文件夹SpryAssets,其中存放着JavaScript代码文件SpryEffects.js,不要移动或修改它们,否则效果会不起作用;其次,如下图所示,在HTML源文件中,也自动添加了几行代码,不要对代码进行修改,否则效果也会不起作用;(2).图片渐隐效果:在网页XingWei-05-B.html中,进行如下操作:如下图所示,在网页中选中人物图片,并将其命名为“Ren”,并为其添加空链接;添加行为,使得鼠标经过时,图片“Ren”出现渐隐效果,渐隐自40%到100%;可以勾选“切换效果”,查看其显示效果有何不同;(3).网页晃动效果:在网页XingWei-05-C.html中,进行如下操作:在该网页中,选中整个表格,并将其命名为“TT”;添加行为,使得鼠标经过时,页面出现晃动效果;6.行为:显示/隐藏AP元素!(1).在网页XingWei-06.html中,进行如下操作:(2).在网页中,插入两个AP元素,并令其位置对其,大小重合,具体如下;在网页中,绘制第1个AP元素,属性设置如下:1.AP元素的名称为:P01;2.插入图片01.jpg;3.设置AP元素大小,与图片大小一致;4.设置AP元素的位置为:左350像素,上170像素;5.完成后,如下左图所示:在网页中,绘制第2个AP元素,属性设置如下:1.AP元素的名称为:P02;2.插入图片02.jpg;3.设置AP元素大小,与图片大小一致;4.设置AP元素的位置为:左350像素,上170像素;5.完成后,如上右图所示:(3).行为的添加,具体要求如下:1.网页打开时,右侧的两个AP元素P01、P02均不可见,如下图所示;2.给左侧的两个小图片,分别添加空链接,令鼠标经过时,能够显示“小手”状态;3.给左侧第1个小图片,添加行为,令鼠标单击该小图片时,右侧显示P01,如下左图;4.给左侧第2个小图片,添加行为,令鼠标单击该小图片时,右侧显示P02,如下右图;注:若左侧是文字,而不是小图片,也可以实现类似的功能;7.行为:设置状态栏文本!(1).在网页XingWei-07.html中,进行如下操作;添加行为,使网页打开时,在底部状态栏中,显示文字“欢迎光临东方花苑!”;8.完成后,将文件夹XW-XueHao-XingMing,压缩,上传至教师机。

JS在一定时间内跳转页面及各种刷新页面的实现方法

JS在一定时间内跳转页面及各种刷新页面的实现方法

JS在⼀定时间内跳转页⾯及各种刷新页⾯的实现⽅法1.js 代码:<SCRIPT LANGUAGE="JavaScript">var time = 5; //时间,秒var timelong = 0;function diplaytime(){ //时间递减document.all.his.innerHTML = time -timelong ;timelong ++;}function redirect(){ //跳转页//history.back();window.location.href="Category-list";//指定要跳转到的⽬标页⾯}timer=setInterval('diplaytime()', 1000);//显⽰时间timer=setTimeout('redirect()',time * 1000); //跳转</SCRIPT>2.页⾯引⽤:<DIV ALIGN="CENTER" style="font-size:15;color:threeddarkshadow;" >如果你不执⾏任何操作,系统会在5秒后⾃动返回!</DIV><DIV ALIGN="CENTER" style="font-size:15;color:threeddarkshadow;" id="his">5秒钟后⾃动返回.....</DIV>javascript/js ⾃动刷新页⾯和页⾯跳转的实现⽅法1)<meta http-equiv="refresh"content="10;url=跳转的页⾯">10表⽰间隔10秒刷新⼀次2)<script language=''javascript''>window.location.reload(true);</script>如果是你要刷新某⼀个iframe就把window给换成frame的名字或ID号3)<script language=''javascript''>window.navigate("本页⾯url");</script>4>function abc(){window.location.href="/blog/window.location.href";setTimeout("abc()",10000);}刷新本页:Response.Write("<script language=javascript>window.location.href=window.location.href;</script>")刷新⽗页:Response.Write("<script language=javascript>opener.location.href=opener.location.href;</script>")转到指定页:Response.Write("<script language=javascript>window.location.href='yourpage.aspx';</script>")刷新页⾯实现⽅式总结(HTML,ASP,JS)'by aloxy定时刷新:1,<script>setTimeout("location.href='url'",2000)</script>说明:url是要刷新的页⾯URL地址2000是等待时间=2秒,2,<meta name="Refresh" content="n;url">说明:n is the number of seconds to wait before loading the specified URL.url is an absolute URL to be loaded.n,是等待的时间,以秒为单位url是要刷新的页⾯URL地址3,<%response.redirect url%>说明:⼀般⽤⼀个url参数或者表单传值判断是否发⽣某个操作,然后利⽤response.redirect刷新。

dreamweaver图片展示特效代码

dreamweaver图片展示特效代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"> <html><head><title>6</title><style type="text/css">html {overflow: hidden;}body {position: absolute;margin: 0px;padding: 0px;background: #111;width: 100%;height: 100%;}#screen {position: absolute;left: 10%;top: 10%;width: 80%;height: 80%;background: #000;}#screen img {position: absolute;cursor: pointer;visibility: hidden;width: 0px;height: 0px;}#screen .tvover {border: solid #876;opacity: 1;filter: alpha(opacity=100);}#screen .tvout {border: solid #fff;opacity: 0.7;}#bankImages {display: none;}</style><script type="text/javascript">var Library = {};Library.ease = function () {this.target = 0;this.position = 0;this.move = function (target, speed){this.position += (target - this.position) * speed;}}var tv = {/* ==== variables ==== */O : [],screen : {},grid : {size : 4, // 4x4 gridborderSize : 6, // borders sizezoomed : false},angle : {x : new Library.ease(),y : new Library.ease()},camera : {x : new Library.ease(),y : new Library.ease(),zoom : new Library.ease(),focalLength : 750 // camera Focal Length},/* ==== init script ==== */init : function (){this.screen.obj = document.getElementById('screen');var img = document.getElementById('bankImages').getElementsByTagName('img');this.screen.obj.onselectstart = function () { return false; }this.screen.obj.ondrag = function () { return false; }/* ==== create images grid ==== */var ni = 0;var n = (tv.grid.size / 2) - .5;for (var y = -n; y <= n; y++){for (var x = -n; x <= n; x++){/* ==== create HTML image element ==== */var o = document.createElement('img');var i = img[(ni++) % img.length];o.className = 'tvout';o.src = i.src;tv.screen.obj.appendChild(o);/* ==== 3D coordinates ==== */o.point3D = {x : x,y : y,z : new Library.ease()};/* ==== push object ==== */o.point2D = {};o.ratioImage = 1;tv.O.push(o);/* ==== on mouse over event ==== */o.onmouseover = function (){if (!tv.grid.zoomed){if (tv.o){/* ==== mouse out ==== */tv.o.point3D.z.target = 0;tv.o.className = 'tvout';}/* ==== mouse over ==== */this.className = 'tvover';this.point3D.z.target = -.5;tv.o = this;}}/* ==== on click event ==== */o.onclick = function (){if (!tv.grid.zoomed){/* ==== zoom in ==== */tv.camera.x.target = this.point3D.x;tv.camera.y.target = this.point3D.y;tv.camera.zoom.target = tv.screen.w * 1.25;tv.grid.zoomed = this;} else {if (this == tv.grid.zoomed){/* ==== zoom out ==== */tv.camera.x.target = 0;tv.camera.y.target = 0;tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);tv.grid.zoomed = false;}}}/* ==== 3D transform function ==== */o.calc = function (){/* ==== ease mouseover ==== */this.point3D.z.move(this.point3D.z.target, .5);/* ==== assign 3D coords ==== */var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;var z = this.point3D.z.position * tv.camera.zoom.position;/* ==== perform rotations ==== */var xy = tv.angle.cx * y - tv.angle.sx * z;var xz = tv.angle.sx * y + tv.angle.cx * z;var yz = tv.angle.cy * xz - tv.angle.sy * x;var yx = tv.angle.sy * xz + tv.angle.cy * x;/* ==== 2D transformation ==== */this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);this.point2D.x = yx * this.point2D.scale;this.point2D.y = xy * this.point2D.scale;this.point2D.w = Math.round(Math.max(0,this.point2D.scale * tv.camera.zoom.position * .8));/* ==== image size ratio ==== */if (this.ratioImage > 1)this.point2D.h = Math.round(this.point2D.w / this.ratioImage);else{this.point2D.h = this.point2D.w;this.point2D.w = Math.round(this.point2D.h * this.ratioImage);}}/* ==== rendering ==== */o.draw = function (){if (plete){/* ==== paranoid image load ==== */if (!this.loaded){if (!this.img){/* ==== create internal image ==== */this.img = new Image();this.img.src = this.src;}if (plete){/* ==== get width / height ratio ==== */this.style.visibility = 'visible';this.ratioImage = this.img.width / this.img.height;this.loaded = true;this.img = false;}}/* ==== HTML rendering ==== */this.style.left = Math.round(this.point2D.x * this.point2D.scale +tv.screen.w - this.point2D.w * .5) + 'px';this.style.top = Math.round(this.point2D.y * this.point2D.scale +tv.screen.h - this.point2D.h * .5) + 'px';this.style.width = this.point2D.w + 'px';this.style.height = this.point2D.h + 'px';this.style.borderWidth = Math.round(Math.max(this.point2D.w,this.point2D.h) * tv.grid.borderSize * .01) + 'px';this.style.zIndex = Math.floor(this.point2D.scale * 100);}}}}/* ==== start script ==== */tv.resize();mouse.y = tv.screen.y + tv.screen.h;mouse.x = tv.screen.x + tv.screen.w;tv.run();},/* ==== resize window ==== */resize : function (){var o = tv.screen.obj;tv.screen.w = o.offsetWidth / 2;tv.screen.h = o.offsetHeight / 2;tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {tv.screen.x += o.offsetLeft;tv.screen.y += o.offsetTop;}},/* ==== main loop ==== */run : function (){/* ==== motion ease ==== */tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);tv.camera.zoom.move(tv.camera.zoom.target, .05);/* ==== angles sin and cos ==== */tv.angle.cx = Math.cos(tv.angle.x.position);tv.angle.sx = Math.sin(tv.angle.x.position);tv.angle.cy = Math.cos(tv.angle.y.position);tv.angle.sy = Math.sin(tv.angle.y.position);/* ==== loop through all images ==== */for (var i = 0, o; o = tv.O[i]; i++){o.calc();o.draw();}/* ==== loop ==== */setTimeout(tv.run, 32);}}/* ==== global mouse position ==== */ var mouse = {x : 0,y : 0}document.onmousemove = function(e) {if (window.event) e = window.event;mouse.x = e.clientX;mouse.y = e.clientY;return false;}</script></head><body><div id="bankImages"><img alt="" src="images/wi23.jpg"><img alt="" src="images/wt06.jpg"><img alt="" src="images/wt47.jpg"><img alt="" src="images/wt16.jpg"><img alt="" src="images/wt43.jpg"><img alt="" src="images/wt19.jpg"><img alt="" src="images/wt27.jpg"><img alt="" src="images/wt46.jpg"><img alt="" src="images/wt14.jpg"><img alt="" src="images/wt21.jpg"><img alt="" src="images/wt35.jpg"><img alt="" src="images/wt48.jpg"><img alt="" src="images/wt55.jpg"><img alt="" src="images/wt40.jpg"><img alt="" src="images/wt53.jpg"><img alt="" src="images/wt25.jpg"></div><script type="text/javascript">/* ==== start script ==== */onresize = tv.resize;tv.init();</script></body></html>效果图。

Dreamweaver代码大全DW常用代码

Dreamweaver代码大全DW常用代码

Dreamweaver 代码大全 Dreamweaver 代码基本结构标签: <HTML>,表示该文件为HTML 文件<HEAD>,包含文件的标题,使用的脚本,样式定义等<TITLE>---</TITLE>,包含文件的标题,标题出现在浏览器标题栏中</HEAD>,<HEAD>的结束标志<BODY>,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示. </BODY>,<BODY>的结束标志 </HTML>,<HTML>的结束标志其它主要标签,以下所有标志用在<BODY></BODY>中:<A,href="…"></A>,链接标志,"…"为链接的文件地址<IMG,src="…">,显示图片标志,"…"为图片的地址<BR>,换行标志、<P>,分段标志<B></B>,采用黑体字<I></I>,采用斜体字<HR>,水平画线<TABLE></TABLE>,定义表格,HTML 中重要的标志<TR></TR>,定义表格的行,用在<TABLE></TABLE>中<TD></TD>,定义表格的单元格,用在<TR></TR>中<FONT></FONT>,字体样式标志例:属性 bgcolor="BLACK"表示背景色为黑色.引用属性的例子:`<BODY,bgcolor="BLACK"></BODY>表示页面背景色为黑色;<TABLE,bgcolor="BLACK"></TABLE>表示表格背景色为黑色.ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度.ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度.ALIGN=RIGHT,右对齐.COLOR=#RRGGBB,前景色,参考色彩对照表.BGCOLOR=#RRGGBB,背景色.<center>表示绝对居中.(<table></table>表格标识的开始和结束.cellpadding=数值单位是像素,定义表元内距cellspacing=数值单位是像素,定义表元间距border=数值单位是像素,定义表格边框宽度width=数值单位是像素或窗口百分比,定义表格宽度background=图片链接地址,定义表格背景图<tr></tr>表格中一个表格行的开始和结束;<td></td>表格中行内一个单元格的开始和结束Colspan="",单元格跨越多列;:Rowspan="",单元格跨越多行;Width="";定义表格宽度Height="";定义表格高度Align="";对齐方式Valign="";Border="",边框宽度;Bgcolor="",背景色;Bordercolor="",边框颜色;Bordercolorlight="",边框明亮面的颜色;Bordercolordark="",边框暗淡面的颜色;Cellpadding="",内容与边框的距离(默认为 2);;Cellspacing="",单元格间的距离(默认为 2);<br>强制换行<font></font>文本标识的开始和结束face=字体color=颜色<b></b>加粗文字标识的开始和结束style=font-size:40pt;,用样式表方式控制字体大小,这里是 40 点<div></div>,分区标识的开始和结束/align=|center|left|right|水平对齐方式<marquee></marquee>动态标识的开始和结束,如标识内放置贴图格式则可实现图片滚动scrollamount=1~60,滚动速度direction=|left|right|up|down|,滚动方向scrolldelay=滚动延时,单位:毫秒<P>段落标识,空格符,<img>贴图标识·Multiple,多选src=../../图片链接地址,贴图标识必备属性:style=filter:Alpha(opacity=100,style=2);filter:样式表滤镜;Alpha:透明滤镜,opacity:不透明度 100(0~100);style:样式 2(0~3),rules="none"不显示内框"<embed,src ="…">多媒体文件标识src="../../FILENAME",设定音乐文件的路径,文件类型除了可以播放.rm;.mp3;.wav 等音频,还可播放.swf 和.mov 等视 频. AUTOSTART=TRUE/FALSE,、是否要音乐文件传送完就自动播放,TRUE 是要,FALSE 是不要,默认为 FALSELOOP=,设定播放重复次数,LOOP=6 表示重复 6 次,true 或-1 为无限循环,false 为播放一次即停 止. STARTIME="分:秒",设定乐曲的开始播放时间,如 20 秒后播放写为 STARTIME=00:20VOLUME=0-100,设定音量的大小.如果没设定的话,就用系统的音量. WIDTH,HEIGHT,设定控制面板的大小,都设为 0 可隐藏播放器 HIDDEN=TRUE,隐藏控制面板CONTROLS=CONSOLE/SMALLCONSOLE,-设定控制面板的样子,<bgsound,src ="…">,背景音乐标识,只能用于.wav 和.mp3 格式.LOOP=,设定播放重复次数,LOOP=6 表示重复 6 次,true 或-1 为无限循环,false 为播放一次即停 止. 表单标签:<form></form>表格标识的开始和结束,表单的内容都放在这里.下边的标签放在表单内:<select>下拉选择框<option></option></select><textarea></textarea>,大量文字输入的编辑块Cols="",行;Rows="",列;<input,type="text">,文本框<input,type="password">,密码框<input,type="submit">,提交按扭<input,type="checkbox">,复选框<input,type="radio">,单选框<input,type="reset">,重置按扭*<input,type="image">,图片按扭<input,type="hidden">,隐藏域<input,type="button">,按扭<input,type="file">,浏览文件Name="";Value=""Size=""<bgsound>,背景音乐;src=""~Loop="",循环次数;<embed>,媒体播放块;src=""Loop="",循环次数;<marquee></marquee>,滚动部分;Bgcolor=""Behavior,设置或获取文本如何在字幕中滚动.Direction="",滚动方向;Height=""Width=""Loop="",环次数;<!--...-->,注释标记,在"<!--"与"-->"之间的内容将不在浏览器中显示.<html></html>,创建一个 HTML 文档;<head></head>,设置文档标题和其它在网页中不显示的信息;<title></title>,设置文档的标题;<h1></h1>,最大的标题;<pre></pre>,预先格式化文本;<u></u>,下划线<b></b>,黑体字;。

DW代码大全

DW代码大全

DW代码大全一、<html>、<head>、<body>:定义和用法:构成Html文档的重要组成部分,缺一不可。

1、<html>标签:此元素可告知浏览器其自身是一个HTML文档。

<html>与</html>标签限定了文档的开始点和结束点。

2、<body>标签:定义文档的主体。

它包含文档的所有内容(比如文本、图像、颜色和图形等等。

)3、<head>标签:用于定义文档的头部。

下面这些标签可用在head部分:<link>,<meta>,<script>,<style>,以及<title>。

二、<link>,<meta>,<script>,<style>,<title>:1、<link>标签:此元素定义了当前文档与Web集合中其他文档的关系。

如:<linkhref="xxx.css"type="text/css"rel="stylesheet"/>2、<meta>标签:<meta>元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。

如:<metaname="Keywords"content="这里放置关键字"/><metaname="Description"content="这里放置对关键字的描述"/>3、<script>标签:定义一段诸如JavaScript的脚本。

如:<scripttype="text/javascript">alert("感谢您光临我的个人小站!")</script>4、<style>标签:常用在页面内定义CSS样式,但强烈建议使用link标签定义CSS样式。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

网页图片自动切换js代码
<script language =javascript >
var curIndex=0;
//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下。

var timeInterval=1000;
var arr=new Array();
arr[0]="photos/1.jpg";
arr[1]="photos/2.jpg";
arr[2]="photos/3.jpg";
arr[3]="photos/4.jpg";
arr[4]="photos/5.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
<img id=obj src ="photos/1.jpg" width=200 height=150 border =0>
可以自己配置,自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对、相对路径都可以)虽然很简单,但是很实用。

-------------------------------------------------------------
第二种方法:
//修改图片的宽度、高度,注意要和下面的一样,修改显示位置
<style type="text/css">
#img1 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:1; visibility:hidden;} #img2 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:2}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var ie5=(document.getElementById && document.all);
var ns6=(document.getElementById && !document.all);
nPlus = 5 //the % of fading for each step
speed = 50 //速度
// You don't have to edit below this line
nOpac = 100
function FadeImg(){
if(document.getElementById){
document.getElementById('img1').style.visibility="visible";
imgs = document.getElementById('img2');
opacity = nOpac+nPlus;
nOpac = opacity;
setTimeout('FadeImg()',speed);
if(opacity>100 || opacity<0){
nPlus=-nPlus;
}
if(ie5){
imgs.style.filter="alpha(opacity=0)";
imgs.filters.alpha.opacity = opacity;
}
if(ns6){
imgs.style.MozOpacity = 0 + '%';
imgs.style.MozOpacity = opacity + '%';
}
}
}
onload=FadeImg;
// End -->
</script>
<div id="img1">
<img src="photos\1.jpg" border=0 width=140 height=105>
</div>
<div id="img2">
<img src="photos\2.jpg" border=0 width=140 height=105>
</div>
网站。

相关文档
最新文档