首页 > 网站建设 > 分享一个纯js的图片幻灯片代码

分享一个纯js的图片幻灯片代码

2010年5月20日 Tal Rasha 3,107 views 发表评论 阅读评论

这个幻灯片效果没有用到flash,在ie下是有一些切换时的特效,其他浏览器只用chrome试了一下,可以实现切换,没有特效,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript">
var pic=new Array();
var link=new Array();
var adNum=0;
pic[0]="设置图片路径";
pic[1]="";
link[0]="图片链接的地址";
link[1]="";
var preloadedimages=new Array();
for (i=1;i<pic.length;i++){
   preloadedimages[i]=new Image();
   preloadedimages[i].src=pic[i];
}
function setTransition(){
  if (document.all){
    rotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
    rotator.filters.revealTrans.apply();
  }
}
function playTransition(){
  if (document.all)
    rotator.filters.revealTrans.play()
}
function nextAd(){
  if(adNum<pic.length-1)adNum++ ;
     else adNum=0;
   setTransition();
   document.images.rotator.src=pic[adNum];
   var temp=document.getElementById("imglink");
   temp.href=link[adNum];
   playTransition();
   theTimer=setTimeout("nextAd()", 5000);
}
</script>

调用代码如下:

1
2
<a id="imglink" href="第一张图片的链接地址"><img style="filter: revealTrans(duration=2, transition=20);" src="图片地址" alt="" /></a>
<script type="text/javascript">nextAd()</script>
分类: 网站建设 标签: ,
  1. 2010年5月22日09:49 | #1

    嘿嘿
    收藏一下以后做小站了能用用
    多谢分享~

  2. 2010年5月30日19:44 | #2

    好久没来~
    过来坐坐~

  3. 2010年5月31日17:33 | #3

    PR好像快更新了
    快点更新哈。

  4. Tal Rasha
    2010年6月3日21:53 | #4

    @ikeeptrying
    欢迎欢迎!我也好久没来了,有点懒啊哈哈

  5. Tal Rasha
    2010年6月4日20:45 | #5

    @园子
    嗯啊,好的哈哈,今晚整理一下,明天发布。
    ps:pr值更新有什么规律吗

  1. 本文目前尚无任何 trackbacks 和 pingbacks.