學(xué)習(xí)PHP時(shí)期，為了練習(xí)Javascript而寫(xiě)的幻燈片函數(shù)，個(gè)人認(rèn)為還算簡(jiǎn)單使用啊，兼容性也算可以

//幻燈片

//該幻燈片函數(shù)只需要html頁(yè)面有一個(gè)有id的div即可,將id值和圖片路徑數(shù)組傳入即可調(diào)用,其他參數(shù)有默認(rèn)值,可按需傳值

function slide(sid,imgs,width,height,btn_w,btn_h,interval,speed){

//幻燈片的屬性

var sid=sid;//幻燈片容器div的id值

var imgs=imgs;//幻燈片圖片的路徑數(shù)組

var width=width||800;//幻燈片的寬度,默認(rèn)800px

var height=height||400;//幻燈片的高度,默認(rèn)400px

var btn_w=btn_w||30;//幻燈片圖片的寬度,默認(rèn)30px

var btn_h=btn_w||30;//幻燈片圖片的高度,默認(rèn)30px

var interval=interval||3;//每張圖片停留的秒數(shù),默認(rèn)3秒

var speed=speed||2;//圖片滑動(dòng)速度的檔位,默認(rèn)2檔,可以1檔,3檔

var images=[];//用來(lái)存放圖片對(duì)象的數(shù)組

var imgQty=imgs.length;//圖片的數(shù)量

var curImg=0;//幻燈片當(dāng)前不滑動(dòng)圖片的數(shù)組索引

var nextImg=1;//幻燈片當(dāng)前滑動(dòng)的圖片的數(shù)組索引

var btns=[];//用來(lái)存放幻燈片按鈕對(duì)象的數(shù)組

var timer1=null;//用來(lái)儲(chǔ)存幻燈片播放的超時(shí)調(diào)用方法

var timer2=null;//用來(lái)存儲(chǔ)滑動(dòng)動(dòng)畫(huà)的超時(shí)調(diào)用方法

var isDone = false; //是否滑動(dòng)完成

//設(shè)置幻燈片的元素的方法

function setElements(){

//幻燈片容器

var container=document.getElementById(sid);//通過(guò)幻燈片容器id得到幻燈片的div元素對(duì)象

var btnRow=document.createElement('ul');//創(chuàng)建按鈕容器ul

container.appendChild(btnRow);//將按鈕容器ul插入幻燈片容器中

//為幻燈片容器添加事件

container.οnmοuseοver=function(){//鼠標(biāo)劃入停止播放

clearTimeout(timer1);

}

container.οnmοuseοut=function(){//鼠標(biāo)劃出3秒后繼續(xù)播放

timer1=setTimeout(play,3000);

}

//圖片和按鈕

for(var i=0;i

//創(chuàng)建圖片

images[i]=document.createElement('img');

//為圖片添加src屬性

images[i].src=imgs[i];

//將圖片節(jié)點(diǎn)添加到容器中

container.appendChild(images[i]);

//創(chuàng)建按鈕

btns[i]=document.createElement('li');//li標(biāo)簽作為圖片按鈕傳入btns數(shù)組中

btns[i].innerHTML=i+1;//給按鈕填入序號(hào)

btnRow.appendChild(btns[i]);//將按鈕節(jié)點(diǎn)添加到按鈕欄中

//為按鈕添加事件

btns[i].onmouseover = switchImg;

btns[i].onclick = switchImg;

}

//為幻燈片的元素添加css屬性

var head=document.getElementsByTagName('head')[0];//獲取頭標(biāo)簽

var style=document.createElement('style');//創(chuàng)建style標(biāo)簽

head.appendChild(style);//將style標(biāo)簽插入頭標(biāo)簽中

//設(shè)置css字符串

var css="#slide{position:relative;width:800px;height:400px;overflow:hidden;}ul{position:absolute;right:20px;bottom:10px;z-index:9;}img{width:800px;height:400px;left:0px;top:0px;position:absolute;}li{width:30px;height:30px;margin-right:10px;float:left;background:#ccc;list-style:none;text-align:center;line-height:30px;border-radius:50%;opacity:0.8}";

//css樣式兼容性設(shè)計(jì)

try{

style.appendChild(document.createTextNode(css));//非IE

}catch(e){

style.styleSheet.cssText=css;//IE

}

//第一次加載默認(rèn)的圖片層級(jí)和滑動(dòng)圖片的位置

images[0].style.zIndex=1;//播放開(kāi)始讓第一幅圖片為不滑動(dòng)圖片,層級(jí)為1

images[1].style.zIndex=2;//播放開(kāi)始讓第二幅圖片為滑動(dòng)圖片,層級(jí)為2

images[1].style.left=width+'px';//第二幅圖的位置調(diào)整到容器的右側(cè)準(zhǔn)備滑動(dòng)

}

//將幻燈片的元素插入頁(yè)面

setElements();

//幻燈片的方法

//切換圖片的方法

function switchImg(){

//觸發(fā)該事件的按鈕的索引

var btnIndex = this.innerHTML - 1;

//滑動(dòng)完成并且觸發(fā)不同的按鈕的事件才會(huì)執(zhí)行變換

if (isDone && btnIndex != curImg) {

clearTimeout(timer2);//停止之前的圖片滑動(dòng)

//將滑動(dòng)圖片立即轉(zhuǎn)換為當(dāng)前不滑動(dòng)圖片

images[curImg].style.left='0px';

images[curImg].style.zIndex=1;

//將滑動(dòng)圖片對(duì)應(yīng)的按鈕立即轉(zhuǎn)換為淺色

btns[nextImg].style.background='#ccc';

btns[nextImg].style.color='#000';

//將滑動(dòng)圖片的數(shù)組索引更改為當(dāng)前按鈕對(duì)應(yīng)的圖片的數(shù)組索引

nextImg=this.innerHTML-1;

// //將要滑動(dòng)的圖片移動(dòng)到容器右側(cè),層級(jí)設(shè)為最高,準(zhǔn)備滑動(dòng)

images[nextImg].style.left=width+'px';

images[nextImg].style.zIndex=2;

//立即滑動(dòng)

move();

}

}

//讓圖片完整的滑動(dòng)一次的方法

function move(){

//滑動(dòng)開(kāi)始

isDone = false;

//將上一張滑動(dòng)圖片的樣式和下一張滑動(dòng)圖片的樣式做一下改變

btns[curImg].style.background='#ccc';

btns[curImg].style.color='#000';

btns[nextImg].style.background='#333';

btns[nextImg].style.color='#fff';

if(parseInt(images[nextImg].style.left) > 0){//判斷滑動(dòng)圖片的left是否達(dá)到0位置

images[nextImg].style.left=Math.floor((parseInt(images[nextImg].style.left)-(parseInt(images[nextImg].style.left)-0)/(30/speed)))+'px';//沒(méi)到達(dá)則每次滑動(dòng)剩下路程的25分之一

timer2=setTimeout(move,10);//超時(shí)調(diào)用slide,用遞歸加setTimeout模仿setInterval

}else{//滑動(dòng)圖片的left到達(dá)0位置

clearTimeout(timer2);//銷毀滑動(dòng)的延時(shí)調(diào)用方法

//所有圖片的層級(jí)重置為0

for (var i = 0; i < imgQty; i ++) {

images[i].style.zIndex = 0;

}

curImg = nextImg;//將滑動(dòng)完的圖片的數(shù)組索引賦給不滑動(dòng)圖片的數(shù)組索引變量

nextImg == (imgQty - 1) ? nextImg = 0 : nextImg ++;//判斷滑動(dòng)完的圖片的是否最后一張,是則賦為0,否則加1

//重新設(shè)置新一輪的不滑動(dòng)圖片和滑動(dòng)圖片圖片的定位和層級(jí)屬性

images[curImg].style.left='0px';

images[curImg].style.zIndex=1;

images[nextImg].style.left=width+'px';

images[nextImg].style.zIndex=2;

//滑動(dòng)完成

isDone = true;

}

}

//循環(huán)播放的方法

function play(){

move();

timer1=setTimeout(play,interval*1000);//停留三秒鐘

}

//立即播放

play();

}

AD：真正免費(fèi)，域名+虛機(jī)+企業(yè)郵箱=0元

總結(jié)

以上是生活随笔為你收集整理的php写幻灯片,原生JS写的幻灯片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。