下面是具体的代码，还是比较简单的。
搜尋

首頁 >web前端 >js教程 >JS圖片自動輪換效果實現想法附截圖_javascript技巧

JS圖片自動輪換效果實現想法附截圖_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原創
2016-05-16 16:50:481079瀏覽

今天不在狀態，安靜五一快到了，俺特想玩了。好了，天色已晚，閒話不多說，看下用javaScript 實現的圖片自動輪換效果，先看圖片
JS圖片自動輪換效果實現想法附截圖_javascript技巧 
下面是具體的程式碼，還是比較簡單的。

複製程式碼 代碼如下:

-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



越獄的囚徒 <br><style type="text/css"> <BR>.content{ <BR>border:3px solid red; <BR>padding:3px; <BR>width:500px; <BR>height: 245px; <BR>position:relative; <BR>} <BR>.content img{ <BR>border:0; <br><br>} <BR>.content div{ <BR>position:absolute; >z-index:1000; <BR>border:2px solid green; <BR>padding:3px 5px; <BR>background:#ccc; <BR>} <BR>.content .cur{background:red;color;color: white;}//目前顯示的圖片的小方塊，紅色背景白色字體<BR></style> <br><script type="text/javascript"> <BR>var arr=['images/1.jpg ','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg']; <BR>var i=0; <BR>var ob,obk ; <BR>function lunhuan(){ <BR><br>if(i>4){//數字大於4就從0開始<br>i=0; <BR>} <BR>ob=document.getElementById ("image1"); <BR>ob.src=arr[i]; <BR>//所有div-0到div-4，背景顏色置灰<BR>for(var j=0;j<=4 ;j ){ <BR>document.getElementById("div-" j).style.backgroundColor='#ccc'; <BR>document.getElementById("div-" j).style.color='black'; <BR>} <BR>obk=document.getElementById("div-" i); <BR>obk.style.backgroundColor='red'; <BR>obk.style.color='white'; <BR>i ; <BR>} <BR></script> <br> <br>

JS圖片自動輪換效果實現想法附截圖_javascript技巧
1

2

3

4

5






簡單的說下流程：

1.先定義最外層的DIV

2.再定義緊鄰的圖片DIV

3.圖片右下角的小方塊DIV

用計時器函數，實現圖片輪換，並讓小方塊也產生對於的變化。

OK，睡覺。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：jquery xMarquee實現文字等級無縫滾動效果_jquery下一篇：jquery xMarquee實現文字等級無縫滾動效果_jquery

相關文章

看更多