本文目录一览：
网页轮显幻灯片是怎么做的
用JS（JavaScript）+CSS或Applet做的；
不用什么软件。
透明渐变轮番显示
制作方法：
在head标签下，粘贴代码：
SCRIPT LANGUAGE="JavaScript"
// 设置轮番显示速度 Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// 匀滑转换时间 Duration of crossfade (seconds)
var crossFadeDuration = 3;
// 指定图像文件 Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
/script
修改body：
body bgcolor="#FFFFFF" text="#000000" onLoad="runSlideShow()"
将表格单元格设置名称“id=VU”：
td id=VU
在img中加入代码：img src="1.jpg" name='SlideShow'
至此，我们的效果便制作好了。
制作方法：
1. 在head中插入代码：
script language='javascript'
isns = navigator.appName == "Netscape";
//定义播放图片张数
img1=new Image()
img2=new Image()
img3=new Image()
img4=new Image()
img5=new Image()
//图片路径、文件名
img1.src='images/circul-side.gif'
img2.src='images/css-manual.gif'
img3.src='images/kpt7.jpg'
img4.src='images/msn.jpg'
img5.src='images/ps-
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',4000)
}
/script
可以在代码中按照中文介绍，修改相关信息。
2. 在body中加载：body onload="change_img();"
3. 插入第一张图片，并命名：id="pic"
插入代码：style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'
参考图片代码：
img src="images/circul-side.gif" name="pic" width="120" height="90" id="pic" style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'
制作完成。
观看效果
使用CSS中的revealTrans滤镜制作超弦图片的播放
CSS 中有revealTrans滤镜（具体介绍请参看巧用CSS的 RevealTrans 滤镜），也曾用该滤镜制作过各种图片播放的效果（类似于使用CSS滤镜revealTrans制作图片渐显效果）。知道其在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。
实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。
制作方法：
1、在head中插入JS代码：
SCRIPT language=JavaScript1.2
function reapply(){
setTimeout("slideit()",800)
return true
}
window.onerror=reapply
/SCRIPT
SCRIPT language=JavaScript1.1
!--
//preload images
var image1=new Image()
image1.src="images/01.jpg"
var image2=new Image()
image2.src="images/02.jpg"
var image3=new Image()
image3.src="images/03.jpg"
var image4=new Image()
image4.src="images/04.jpg"
var image5=new Image()
image5.src="images/05.jpg"
var image6=new Image()
image6.src="images/06.jpg"
var image7=new Image()
image7.src="images/07.jpg"
var image8=new Image()
image8.src="images/08.jpg"
var image9=new Image()
image9.src="images/09.jpg"
//--
/SCRIPT
其中：images/big 完整代码：img src="images/circul-side.gif" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide
4、给图片加超链接：a href="javascript :slidelink()"
5、加入代码：
SCRIPT
!--
////change number of images below
var number_of_images=9
//change speed below (in seconds)
var speed=3
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.item(0).Apply()
document.images.slide.src=eval("image"+step+".src")
if (document.all)
slide.filters.item(0).Play()
whichimage=step
if (stepnumber_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+3000)
else
setTimeout("slideit()",speed*1000)
}
function slidelink(){
if (whichimage==1)
top.location.href="/index.html"
if (whichimage==2)
top.location.href="/news.html"
if (whichimage==3)
top.location.href="/game.html"
if (whichimage==4)
top.location.href="/music.html"
if (whichimage==5)
top.location.href="/sport.html"
if (whichimage==6)
top.location.href="/radio.html"
if (whichimage==7)
top.location.href="/travel.html"
if (whichimage==8)
top.location.href="/card.jsp"
else if (whichimage==9)
top.location.href="/study.html"
}
/SCRIPT
其中：各链接地址相对应head中插入的JS代码中的图片。
注意，页面地址必须与图片张数相对应。本教学使用九张图片，相应就放置九个超链接地址。
DHTML幻灯片播放程序
这是一个幻灯片播放程序，也就是一图片轮流播放的程序。我们在一些站点上可以看见这种形式的广告播放条，大多是用CGI做的，也就是要服务器端支持CGI程序，如ASP、PHP、 Perl等。但我们这里的实现方法无需CGI，用的仅是CSS的效果，再加上JavaScripts的控制。只要你的浏览器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不过在这里我们用到了CSS的Filter滤镜效果，该效果只能在IE中出现。有关CSS的Filter滤镜效果，大家可以参看我的《CSS中Filter滤镜详解》，该文章在Yesky.com上已经发表。好了，让我们来做点准备工作吧。
首先，为了制作这个效果，我们首先要打几个尺寸一样大小的图片，让其轮流播放。比如，我找了下面三个88x31的图片做为所用的的图片。
其次，让我们再来复习一下CSS中Filter的图片转换滤镜的知识：
CSS中的显示转换滤镜
显示转换滤镜提供的是一种更为多变的转换效果，它不像混合转换滤镜，只提供一种淡入淡出的效果，它还提供了更多的图片转换效果，它的语法是：
Filter : RevealTrans ( duration = 转换的秒数，transition=转换类型 )
大家可以看见，它有一个转换类型的参数，这里，它提供了24种转换类型，我们只需指定转换类型的代号，就可以让图片按特有的转换效果进行转换。下表就是24种转换滤镜的形式及其对应的代号：
动态转换滤镜的属性、方法和事件
属性名 说明 取值
duration 图像转换的延迟时间，最小单位是毫秒，也就是小数点后第三位。 单位是秒，取值自然数
enabled 指定是否应用滤镜效果 0表示不应用，非0表示就用。
staus 传回一个转换状态 0表示转换停止
1表示显示应用的转换滤镜
2表示正在转换中
方法名 说明
Apply 将滤镜应用到对象上
Play 开始转换
Stop 停止转换
事件名 说明
OnFilterChange 当滤镜转变发生改变或是滤镜完成时所触发的事件
上面的CSS的转换滤镜如何被JavaScripts调用的知识我没有过多的说明，我只是列举了他的属性方法和事件。在后面，我们用 Javascript来控制他的时候，我会告诉大家如何用JavaScripts使其工作的。当然这些滤镜只能在IE4.0中浏览，NetScape不支持，不过，这并不影响netscape中的显示，只不过Netscape中不会出现图片转换的效果了。
下面，我要开始最为核心的部分了，就是编写javascript程序了。我们的思路是，可以定义一组图片（若干张），当页面出现时先显示第一张图片，并预载入第二张图片，第一张图片载入后5秒钟，如果第二张图片也载入了，我们就开始自动切换到第二张图片，此时并预载入第三张图片，如果5秒钟内我们载入了第三张图片，就自动切换到第三张图片，如此播放下去直到最后一张又从头开始。当然，这是自动播放的了。我们还允许用户手动进行向前和向后的播放。
首先，我们要解决的问题是图片的预载入，因为这决定了切换过程的流畅性和播放过程的完美性。要预载入一幅图片很简单，我们只要在内存中新建一个图片的实例变量，并把该变量指向一幅图片，这样，我们的浏览器便会自动载入这幅图片的，这就是图片的预载入。用javascript写出来就是下面这个样子：
var myImage = new Image()
myImage.src = "someImage.gif"
然后，我们还要知道，图片是否载入了吗？如果载入了，我们就显示，如果没载入，那么就要出错了。于是我们还要改一下上面的代码，在其中加入两条语句，所以，这段JavaScript就变成下面的样子了：
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
我们加入了图片的onload和onerror事件，分别代表是否预载和预载出错的事件。这两条句语必需在img.src语句的前面。否则的话，图片预载就会出错。
最后就是我们的图片切换程序了，在前面，我们复习了CSS中Filter转换滤镜的各种效果，这里我们用代号为23的随机效果，下面，是我们为在IE中这种效果所写的JavaScript程序：
if (document.images.slideShow.filters)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// 使用随机的转换效果
document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
// 开始进行转换效果的执行
if (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()
任何人都能将假期的照片放在自己的网站上，但只有最酷的网络构建者会将他们设计成一场幻灯片秀。而且还不是那种简单的一张照片一个HTML页面的幻灯片，而是一个真正有动态感的幻灯片秀，每一个影像都下载到同一个HTML页面去。我们会教你如何使用Dynamic HTML (DHTML)和Cascading Style Sheets(CSS)去构建专属你个人的幻灯片秀，让你的朋友、家人和同事觉得更无聊，喔不！是印象更深刻。但是记住！因为这种幻灯片秀是用DHTML 写的，因此它只能在4.0或以上更新的浏览器版本才能看得到。
当然喽，这种幻灯片秀也有严肃的用途。只是我们现在还没有想到而已。
步骤一
收集你已经准备放在网络上的影像，而且将他们裁成相同的尺寸。确定尺寸范围不超过640 x 480个像素，而且所有的相片的像素尺寸都要保持相同－－如果照片尺寸大小不定，对观众而言会造成视觉上的不和谐。
步骤二
在你的页首标签里，你首先要做的，就是在STYLE标签里指出使用的是CSS。在STYLE标签里，在你想要幻灯片出现的页面设定位置，并决定一开头是否要以空白背景图表现，或者直接秀出第一张幻灯片。请将下列程序代码剪贴到你的页面中，并使用你自己选择的位置座标：
STYLE type="text/css" !-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} -- /STYLE
步骤三
接下来立刻处理CSS的细节部分，还是在页首标签中插入JavaScript。在var numSLides =之后，设定要秀出的幻灯片数目（别设太多，因为每一张照片都会为网页增加可观的KB数）。我们的范例中有五张照片。以下是程序代码：
SCRIPT language="JavaScript1.2" var numSlides = 5; var currentSlide = numSlides;
步骤四
如果你想加入图片的解释说明文字，可以用下列的程序代码，将我们的说明文字换成你自己的说明文字：
var captionTxt = new Array(numSlides);
function setUpCaptions() {
captionTxt[1] = "39号码头入口。"
captionTxt[2] = "海狮在码头附近漫步。"
captionTxt[3] = "小船在码头*岸。"
captionTxt[4] = "水底世界鲸鱼壁画。"
captionTxt[5] = "海中小岛或者是岩石。"
}
步骤五
将这里所示的程序代码贴到你网页中的HTML文件，位置就在JavaScript的说明文字下。因为Navigator 4.0和IE 4.0以不同的方式解读CSS，我们的script就使用对象检测（object detection）来决定呈现的模式。如果呈现的模式是Navigator，它还是可以定义某些特定的对象，使得IE程序代码还是有作用。另外这也是整个程序代码的结尾，所以一定要以/SCRIPT标签来作结束：
function setUp() {
if (!document.all) {
document.all = document;
for (i=1;i=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
}
switchSlide(1);
}
function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].
style.visibility="hidden";
// 如果不要说明文字，请移除下一行:
document.all["captions"].document.forCaptions.captionsText.
value=captionTxt[newSlide];
currentSlide = newSlide;
}
//--
/script
注意那些*近程序代码结尾的注解：如果你没有说明文字，那么就将它下面一行的文字移除。
步骤六
以/HEAD关闭页首标签，然后将下列的程序代码，贴到网页HTML文件中的body部分。 注意，程序代码以个别的DIV标签区分每个影像，他们和正规的IMG src格式有关联：
BODY onLoad="setUp()"
B Builder.com slide show!/B
DIV id="image5" class="slides"IMG src="fifth.jpg"/DIV
DIV id="image4" class="slides"IMG src="fourth.jpg"/DIV
DIV id="image3" class="slides"IMG src="third.jpg"/DIV
DIV id="image2" class="slides"IMG src="second.jpg"/DIV
DIV id="image1" class="slides"IMG src="first.jpg"/DIV
步骤七
观众必须以自己的步调来点按幻灯片，所以你得提供他们点按的东西。。你可以使用简单老式的超链接，但是若有特殊的Previous和Next的GIF点选按钮，就精巧多了。样本程序代码是使用一个table来连接next.gif和previuos.gif：
DIV style="position:absolute; top:350px; left:100px"
A href="javascript :switchSlide(-1)"IMG src="previous.gif" border=0/A
A href="javascript :switchSlide(1)"IMG src="next.gif" border=0/A
/DIV
如果你不想用GIF文件来作Previous和Next点选按钮，用文字取代上面的IMG标签。
步骤八
最后，在TEXTAREA输入欲显现的说明文字。你可以随意决定TEXTAREA的尺寸大小，只要改变rows=和cols=的数字即可。以下是程序代码：
DIV id="captions" style="position:absolute; left: 320px; top:75px"
BPicture caption/B
FORM name=forCaptions
TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"/TEXTAREA
/FORM
/DIV
在javascript中图片的轮番播放怎么做
这是3张图片切换的，把imag[i] (图片名)，ink[i](链接名)，text[i] (图片文字)改成自己图片的对应属性就可以了，要在加图片就把三个数字的下标在加一个var pic_width=225;//宽
var pic_height=173;//高
var button_pos=4; //按扭位置 1左 2右 3上 4下
var stop_time=4000; //图片停留时间(1000为1秒钟)
var show_text=0; //是否显示文字标签 1显示 0不显示
var txtcolor="FF4A8C"; //文字色
var bgcolor="FFFFFF"; //背景色
var imag=new Array();
var link=new Array();
var text=new Array();
var flashdns=""
imag[1]="20100827133323913.jpg";
link[1]="URL";
text[1]="图片名";
imag[2]="20100902170228177.JPG";
link[2]="URL";
text[2]="图片名";
imag[3]="20100827133528424.jpg";
link[3]="URL";
text[3]="图片名";
/script
var pics="", links="", texts="";
for(var i=1; iimag.length; i++){
pics=pics+("|"+imag[i]);
links=links+("|"+link[i]);
texts=texts+("|"+text[i]);
}
pics=pics.substring(1);
links=links.substring(1);
texts=texts.substring(1);var focus_width=225;
var focus_height=153;
var text_height=24;
var swf_height = focus_height+text_height
document.write('object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= width="'+ focus_width +'" height="'+( 173)+'"');
document.write('param name="allowScriptAccess" value="sameDomain"param name="movie" value="js/focus.swf"param name="quality" value="high" param name="bgcolor" value="#F0F0F0"');
document.write('param name="menu" value="false"param name=wmode value="opaque"');
document.write('param name="FlashVars" value="pics='+pics+'links='+links+'texts='+texts+'borderwidth='+focus_width+'borderheight=' +focus_height+'textheight='+text_height+'"');
document.write('embed src="js/focus.swf" wmode="opaque" FlashVars="pics='+pics+'links='+links+'texts='+texts+'borderwidth='+focus_width+'borderheight= '+focus_height+'textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width ="'+ focus_width +'" height="'+ 173 +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" " /'); document.write('/object');
求js轮番图片代码
用jquery插件fancybox，绝对好用。
或者使用下面这段我自己写的
$("#rightSlide").click(function(){
var width = $("#photoDiv").width();//计算当前放图片的DIV能放几张图片,我的图片宽度是200
var mod = parseInt(width/200);
var maxMod = mod*(clickCount+1);//计算需要滚动到哪一张
if(psizemaxMod){//psize是所有照片的数量
clickCount = clickCount+1;
$(".picdiv").each(function(){//对所有存放图片的DIV循环
if($(this).index()maxMod){
$(this).animate({width:'0px'},"slow");//利用JQUERY的animate方法实现滑动效果
}
});
}
});
$("#leftSlide").click(function(){
if(clickCount0){
var width = $("#photoDiv").width();
var mod = parseInt(width/200);
clickCount = clickCount-1;
var minMod = mod*clickCount;
var maxMod = mod*(clickCount+1);
$(".picdiv").each(function(){
if($(this).index()maxMod$(this).index()=minMod){
$(this).animate({width:'200px'},"slow");
}
});
$("#rightTd").removeClass("rightnoclick").addClass("rightclick");
if(clickCount==0){
$("#leftTd").removeClass("leftclick").addClass("leftnoclick");
}
}
});
