下面是具体的代码，还是比较简单的。
社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > JS圖片自動輪換效果實現想法附截圖_javascript技巧

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

WBOY
發布： 2016-05-16 16:50:48
原創
1027 人瀏覽過

今天不在狀態，安靜五一快到了，俺特想玩了。好了，天色已晚，閒話不多說，看下用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，睡覺。
相關標籤：
图片自动轮换
來源：php.cn
上一篇：jquery xMarquee實現文字等級無縫滾動效果_jquery 下一篇：IE瀏覽器中圖片onload事件無效的解決方法_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
CSS行類別使某些元素超出框架，而它們應該是靜態的並固定在顯示器底部 目前我的頁面如下所示。添加行類以使兩個元素彼此相鄰後，底部導覽列被向下推到我必須滾動的位置。在這裡，您可以看到另一個沒有行元素的頁面，其中導航連結完美地黏在顯示器的底部（植物和房間...
來自於 2024-04-03 18:48:12
0
1
281
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板