网页图片自动切换js代码.doc

网页图片自动切换js代码var curIndex=0;var timeInterval=1000;var arr=new Array();arr0=photos/1.jpg;arr1=photos/2.jpg;arr2=photos/3.jpg;arr3=photos/4.jpg;arr4=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=arrcurIndex;可以自己配置，自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用。-第二种方法:/修改图片的宽度、高度，注意要和下面的一样，修改显示位置#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:2100 | opacity另外的方法 可以参考 imgborder:0; there is a pic-player var p = $(#picplayer); var pics1 = url:/online/picPlayer/1.jpg,link:/#,time:5000,url:/online/picPlayer/2.jpg,link:/#,time:4000,url:/online/picPlayer/3.jpg,link:,time:6000,url:/online/picPlayer/2.jpg,link:,time:6000,url:/online/picPlayer/1.jpg,link:,time:6000; initPicPlayer(pics1,p.css(width).split(px)0,p.css(height).split(px)0); / / function initPicPlayer(pics,w,h) /选中的图片 var selectedItem; /选中的按钮 var selectedBtn; /自动播放的id var playID; /选中图片的索引 var selectedIndex; /容器 var p = $(#picplayer); p.text(); p.append(); var c = $(#piccontent); for(var i=0;ipics.length;i+) /添加图片到容器中 c.append(); /按钮容器，绝对定位在右下角 p.append(); / var btnHolder = $(#picbtnHolder); btnHolder.append(); var btns = $(#picbtns); / for(var i=0;ipics.length;i+) /增加图片对应的按钮 btns.append( +(i+1)+ ); $(#picbtn+i).data(index,i); $(#picbtn+i).click( function(event) if(selectedItem.attr(src) = $(#picitem+$(this).data(index).attr(src) return; setSelectedItem($(this).data(index); ); btns.append( ); / setSelectedItem(0); /显示指定的图片index function setSelectedItem(index) selectedIndex = index; clearInterval(playID); /alert(index); if(selectedItem)selectedItem.fadeOut(fast); selectedItem = $(#picitem+index); selectedItem.fadeIn(slow); / if(selectedBtn) selectedBtn.css(backgroundColor,#eee); selectedBtn.css(color,#000); selectedBtn = $(#picbtn+index); selectedBtn.css(backgroundColor,#000); selectedBtn.css(color,#fff); /自动播放 playID = setInterval(function() var index = selectedIndex+1; if(index pics.length-1)index=0; setSelectedItem(index); ,picsindex.time); 详细出处参考：/article/17008.htm pic player imgborder:0; there is a pic-player var p = $(#picplayer); var pics1 = url:/online/picPlayer/1.jpg,link:/#,time:5000,url:/online/picPlayer/2.jpg,link:/#,time:4000,url:/online/picPlayer/3.jpg,link:,time:6000,url:/online/picPlayer/2.jpg,link:,time:6000,url:/online/picPlayer/1.jpg,link:,time:6000; initPicPlayer(pics1,p.css(width).split(px)0,p.css(height).split(px)0); function initPicPlayer(pics,w,h) var selectedItem; /选中的按钮 var selectedBtn; /自动播放的id var playID; /选中图片的索引 var selectedIndex; /容器 var p = $(#picplayer); p.text(); p.append(); var c = $(#piccontent); for(var i=0;ipics.length;i+) /添加图片到容器中 c.append(); /按钮容器，绝对定位在右下角 p.append(); / var btnHolder = $(#picbtnHolder); btnHolder.append(); var btns = $(#picbtns); / for(var i=0;ipics.length;i+) /增加图片对应的按钮 btns.append( +(i+1)+ ); $(#picbtn+i).data(index,i); $(#picbtn+i).click( function(event) if(selectedItem.attr(src) = $(#picitem+$(this).data(index).attr(src) return; setSelectedItem($(this).data(index); ); btns.append( ); / setSelectedItem(0); /显示指定的图片index function setSelectedItem(index) selectedIndex = index; clearInterval(playID); /alert(index); if(selectedItem)selectedItem.fadeOut(fast); selectedItem = $(#picitem+index); selectedItem.fadeIn(slow); / if(selectedBtn) selectedBtn.css(backgroundColor,#eee); selectedBtn.css(color,#000); selectedBtn = $(#picbtn+index); selectedBtn.css(backgroundColor,#000); sele