化成天下网首页新增图片随机切换效果

请先到《化成天下网》首页，观看图片随机切换效果http://hctx.hust.edu.cn/ 。

实现方法，在你的页面上留出一个id="pic"的容器（div,span,td都行），然后在外加上这句，以下是该JS源码：

——————–slideimg.js———————–

var imgsrc = new Array();
var imglink = new Array();
var imgalt = new Array();
imgsrc[0] = "http://202.112.28.132/hust/hctx/slideimg/1329.jpg"; //图片地址链接
imgsrc[1] = "http://202.112.28.132/hust/hctx/slideimg/1319.jpg"; 
imgsrc[2] = "http://202.112.28.132/hust/hctx/slideimg/1309.jpg"; //添加更多图片只需按格式继续增加数组元素

imgalt[0] = "第1329期 郑功成:民生问题与和谐社会"; //对该图片的描述
imgalt[1] = "第1319期 左大培:中国的宏观经济与中美关系(下)";
imgalt[2] = "第1309期 Ray Hiebert:互联网和大众，媒体的未来";

imglink[0] = "http://www.univs.cn/newweb/univs/hust/2007-12-10/805079.html"; //图片点击后的跳转链接地址
imglink[1] = "http://www.univs.cn/newweb/univs/hust/2007-11-19/800535.html";
imglink[2] = "http://www.univs.cn/newweb/univs/hust/2007-10-29/796264.html";

var index = 0; //初始播放图片序号
var duration = 5000; //图片切换时间（毫秒）

var pic = document.getElementById("pic"); //此ID是与页面唯一关联处

function preImg(){ 
pic.innerHTML = ""; //除掉原来内容
var a = document.createElement("a");
a.setAttribute("href",imglink[index]);
a.setAttribute("title",imgalt[index]);
pic.appendChild(a); 
var slideimg = document.createElement("img");
slideimg.setAttribute("src",imgsrc[index]);
a.appendChild(slideimg);
slideimg.style.filter = "revealTrans(duration=1,transition=23)";
setTimeout("nextImg()",duration);
}

function nextImg(){
var img = pic.firstChild.firstChild;
if(img.filters){
img.filters.revealTrans.transition=Math.floor(Math.random()*23);
img.filters.revealTrans.apply();
}
index = (indexpic.firstChild.setAttribute("href",imglink[index]);
pic.firstChild.setAttribute("title",imgalt[index]);
img.setAttribute("src",imgsrc[index]);
if(img.filters) img.filters.revealTrans.play()
setTimeout("nextImg()",duration);
}

preImg();

//代码由catge原创，可随便引用，注明blog:catge.blogbus.com即可

———————————————————

考虑到浏览器兼容问题，所以采用了标准的DOM来写这段函数，图像的切换效果是随机生成的。基本思路就是：

1.先去掉id="pic"的容器的原有内容

2.用DOM生成一个子节点a和a的子节点img

3.给a,img设置属性，同时如果支持浏览器滤镜的话会套上filter效果

4.通过setTimeout改变a、img的src、href等属性，同时给支持滤镜的浏览器加上filter效果

这段代码比其他类似代码的优势是：标准化和兼容性

不足的地方有：

1.如何通过后台自动调用前面的几个数组的数据，条件许可的化，后台做比前台JS实现更好。想实现这种功能，至少要让后台多输出几个img到前台来；

2.扩展图片选择功能，比如加几个浮动的小标签在图片上，点“1”就到第一张图片，点“5”就到第五张图片。主要考虑到这样做可能比较依赖页面的样式定义，所以也就暂时没加上这种功能。

3.给非IE浏览器添加更酷的功能。其实这段效果只有IE能显示出来，FIREFOX等浏览器下只是单纯的切换图片而已。考虑到这些浏览器有更强的CSS特性，应该可以做类似的酷炫效果给他们。

————————————————–

12月27日补记：昨天配合后台加上了自动加载图片功能，以后就无需手动修改了。实现方法为：页面上新建一个id为imgurl的隐藏div，从后台输出最近五期人文讲座的数据（图片链接地址，文章标题，链接地址），然后通过本JS进行实现。JS地址已改，上半部分代码改动为：

var index = 0; //初始播放图片序号
var duration = 5000; //图片切换时间（毫秒）
var pic = document.getElementById("pic"); //获取展示图片容器
var imgurl = document.getElementById("imgurl"); //获取包含图片链接信息的容器
var imgsrc = new Array();
var imglink = new Array();
var imgalt = new Array();

function preImg(){ 
var i = 0; 
imgurl = imgurl.innerHTML.split("*");
for(var j=0;j<imgurl.length-1;j=j+3){ 
imglink[i] = imgurl[j];
imgsrc[i] = imgurl[j+1];
imgalt[i] = imgurl[j+2];
i++; 
}
pic.innerHTML = ""; //除掉
var a = document.createElement("a");
a.setAttribute("href",imglink[index]);
a.setAttribute("title",imgalt[index]);
pic.appendChild(a); 
var slideimg = document.createElement("img");
slideimg.setAttribute("src",imgsrc[index]);
a.appendChild(slideimg);
slideimg.style.filter = "revealTrans(duration=1,transition=23)";
setTimeout("nextImg()",duration);
}