《网页图片自动切换js代码》由会员分享，可在线阅读，更多相关《网页图片自动切换js代码（7页珍藏版）》请在金锄头文库上搜索。
1、网页图片自动切换 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;elsecurI
2、ndex+=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;
3、z-index:2100 | opacity另外的方法 可以参考imgborder:0; there is a pic-player var p = $(#picplayer); var pics1 = url:http:/ 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; /选中图片的索引
4、 var selectedIndex; /容器 var p = $(#picplayer); p.text(); p.append(); var c = $(#piccontent); for(var i=0;i); /按钮容器，绝对定位在右下角 p.append(); / var btnHolder = $(#picbtnHolder); btnHolder.append(); var btns = $(#picbtns); / for(var i=0;i +(i+1)+ ); $(#picbtn+i).data(index,i); $(#picbtn+i).click( function(
5、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.f
6、adeOut(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() v
7、ar index = selectedIndex+1; if(index pics.length-1)index=0; setSelectedItem(index); ,picsindex.time); 详细出处参考：http:/ player imgborder:0; there is a pic-player var p = $(#picplayer); var pics1 = url:http:/ initPicPlayer(pics1,p.css(width).split(px)0,p.css(height).split(px)0); function initPicPlayer(pi
8、cs,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;i); /按钮容器，绝对定位在右下角 p.append(); / var btnHolder = $(#picbtnHolder); btnHolder.append(); var btns = $(#picbtns); / fo
9、r(var i=0;i +(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) selectedInd
10、ex = 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); 详细出处参考：http:/
