简单写了段代码，应该是可以兼容FF与IE的。自己根据需要再去修改吧。<html>
<head>
<script type="text/javascript">
var imgid = 0;
function AddImg(imgUrl) {
var obj = document.getElementById("test");
if (obj) {
var objImg = document.createElement("IMG");
objImg.id = "TempImg_" + (imgid++);
objImg.src = imgUrl;
objImg.style.position = "absolute";
objImg.style.posLeft = 0;
objImg.style.posTop = 0;
objImg.style.opacity = 0;
objImg.style.filter = "Alpha(Opacity=0)";
obj.appendChild(objImg);
setOpacity(objImg.id, 0);
}
}
function setOpacity(id, opacity) {
var obj = document.getElementById(id);
if (obj) {
obj.style.opacity = opacity / 100;
obj.style.filter = "Alpha(Opacity="+ opacity +")";
if (opacity<100) {
setTimeout(("setOpacity('" + id + "', " + Math.min(opacity+10,100) + ")"),100);
}
}
}
</script>
</head>
<body>
输入图片URL地址：<input type="text" id="imgurl" /> <input type="button" onClick="AddImg(document.getElementById('imgurl').value);" value="增加图片" /><br />
<div id="test" style="position:relative; width:400px; height:400px; background-color:#CCCCCC; "></div>
</body>
</html>
你试一下我的代码，就知道是不是你需要的了。
至于图片数组与Timer，自己加一下就Ok了。
这个是没办法替换的，因为你要把前一张做为背景，然后新的图片逐渐显现，然后取代前一张图片。对于已经被覆盖图片的删除，你在Addimg函数的末尾加这样的语句试试。[code]
if (obj.children.length>5) {
obj.removeChild(obj.children[0]);
}
[/code]上面的语句我没试过，如果不行你说下，我测试看看。
if (obj.children.length>3) {
obj.removeChild(obj.children[0]);
}
上面的语句我没试过，如果不行你说下，我测试看看。
<head>
<script type="text/javascript"> //让Firefox中的HTMLOBJ支持children属性
HTMLElement.prototype.__defineGetter__("children",
function () {
var returnValue = new Object();
var number = 0;
for (var i=0; i<this.childNodes.length; i++) {
if (this.childNodes[i].nodeType == 1) {
returnValue[number] = this.childNodes[i];
number++;
}
}
returnValue.length = number;
return returnValue;
}
); function showImg() {
var obj = document.getElementById("test");
if (obj) {
if (obj.children.length>1) {
var objImg = obj.children[0];
objImg.style.opacity = 0;
objImg.style.filter = "Alpha(Opacity=0)";
obj.removeChild(objImg);
obj.appendChild(objImg);
setOpacity(objImg.id, 0);
setTimeout("showImg()",2000);//图片切换时间（毫秒）
}
}
}function setOpacity(id, opacity) {
var obj = document.getElementById(id);
if (obj) {
obj.style.opacity = opacity / 100;
obj.style.filter = "Alpha(Opacity="+ opacity +")";
if (opacity <100) {
setTimeout(("setOpacity('" + id + "', " + Math.min(opacity+10,100) + ")"),100);
}
}
}
</script>
<style>
#test { position:relative; width:400px; height:400px; background-color:#CCCCCC; }
#test img { position:absolute; left:0; top:0; }
</style>
</head>
<body onLoad="showImg();">
<!--每个IMG都必须有不同的ID-->
<div id="test">
<img id="img01" src="http://www.sn.xinhuanet.com/2006-12/11/xin_25120311144314004951.jpg" />
<img id="img02" src="http://www.sn.xinhuanet.com/2006-12/11/xin_25120311144365651682.jpg" />
<img id="img03" src="http://www.sn.xinhuanet.com/2006-12/11/xin_251203111443937318543.jpg" />
<img id="img04" src="http://www.sn.xinhuanet.com/2006-12/11/xin_261203111443406289654.jpg" />
</div>
</body>
</html>
点下面的数字来更换图片,,,
我弄的主要是因为切换的效果不好...
楼主说的那个效果要想在JS+CSS+HTML上实现，并做到良好客户体验的话，你要使用多个时钟，对按钮移入移出，图片的切换等使用setTimeout与clearTimeout组合控制。相对你刚开始说的例子复杂许多，就不是简单几句话能实现的了。
个人建议用Flash来实现。你用“Flash 图片轮播”去Google上搜索，有很多组件的。
http://www.csdn.net/ui/adrotate.htm
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}