[推薦] 網頁多張圖片自動切換js代碼-簡潔好用
網頁圖片自動切換js代碼 --網頁JS圖片切換代碼
<script language =javas
var curIndex=0;
//時間間隔(單位毫秒)，每秒鐘顯示一張，數組共有5張圖片放在Photos文件夾下。圖片路徑可以是絕對路徑或者相對路徑
var timeInterval=1000; //時間1秒
var arr=new Array();
arr[0]="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="img/logo.gif" 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="JavaS
<!-- 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 + '%';
}
}
}
on
// 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>