JS圖片自動(dòng)輪換效果實(shí)現(xiàn)思路附截圖
更新時(shí)間：2014年04月30日 10:51:18 作者：
這篇文章主要介紹了JS實(shí)現(xiàn)的圖片自動(dòng)輪換效果，有具體的實(shí)現(xiàn)思路及截圖，希望對(duì)大家學(xué)習(xí)有所幫助
今天不在狀態(tài)，安靜五一快到了，俺就特想玩了。好了，天色已晚，閑話不多說(shuō)，看下用javaScript 實(shí)現(xiàn)的圖片自動(dòng)輪換效果，先看圖片
下面是具體的代碼，還是比較簡(jiǎn)單的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>越獄的囚徒</title>
<style type="text/css">
.content{
border:3px solid red;
padding:3px;
width:500px;
height:245px;
position:relative;
}
.content img{
border:0;
}
.content div{
position:absolute;
z-index:1000;
border:2px solid green;
padding:3px 5px;
background:#ccc;
}
.content .cur{background:red;color:white;}//當(dāng)前顯示的圖片的小方塊，紅色背景白色字體
</style>
<script type="text/javascript">
var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg'];
var i=0;
var ob,obk;
function lunhuan(){
if(i>4){//數(shù)字大于4就從0開(kāi)始
i=0;
}
ob=document.getElementById("image1");
ob.src=arr[i];
//所有div-0到div-4，背景顏色置灰
for(var j=0;j<=4;j++){
document.getElementById("div-"+j).style.backgroundColor='#ccc';
document.getElementById("div-"+j).style.color='black';
}
obk=document.getElementById("div-"+i);
obk.style.backgroundColor='red';
obk.style.color='white';
i++;
}
</script>
</head>
<body onload="window.setInterval(lunhuan,1000);">
<div class="content">
<img id="image1" src="images/1.jpg"/>
<div class="cur" id="div-0" style="top:215px;right:128px;">1</div>
<div id="div-1" style="top:215px;right:98px;">2</div>
<div id="div-2" style="top:215px;right:68px;">3</div>
<div id="div-3" style="top:215px;right:38px;">4</div>
<div id="div-4" style="top:215px;right:8px;">5</div>
</div>
<input type="button" value="test" onclick="lunhuan();"/>
</body>
</html>
簡(jiǎn)單的說(shuō)下流程：
1.先定義最外層的DIV
2.再定義緊挨著的圖片DIV
3.圖片右下角的小方塊DIV
用計(jì)時(shí)器函數(shù)，實(shí)現(xiàn)圖片輪換，并讓小方塊也產(chǎn)生對(duì)于的變化。
OK，睡覺(jué)。
下面是具體的代碼，還是比較簡(jiǎn)單的。
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>越獄的囚徒</title>
<style type="text/css">
.content{
border:3px solid red;
padding:3px;
width:500px;
height:245px;
position:relative;
}
.content img{
border:0;
}
.content div{
position:absolute;
z-index:1000;
border:2px solid green;
padding:3px 5px;
background:#ccc;
}
.content .cur{background:red;color:white;}//當(dāng)前顯示的圖片的小方塊，紅色背景白色字體
</style>
<script type="text/javascript">
var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg'];
var i=0;
var ob,obk;
function lunhuan(){
if(i>4){//數(shù)字大于4就從0開(kāi)始
i=0;
}
ob=document.getElementById("image1");
ob.src=arr[i];
//所有div-0到div-4，背景顏色置灰
for(var j=0;j<=4;j++){
document.getElementById("div-"+j).style.backgroundColor='#ccc';
document.getElementById("div-"+j).style.color='black';
}
obk=document.getElementById("div-"+i);
obk.style.backgroundColor='red';
obk.style.color='white';
i++;
}
</script>
</head>
<body onload="window.setInterval(lunhuan,1000);">
<div class="content">
<img id="image1" src="images/1.jpg"/>
<div class="cur" id="div-0" style="top:215px;right:128px;">1</div>
<div id="div-1" style="top:215px;right:98px;">2</div>
<div id="div-2" style="top:215px;right:68px;">3</div>
<div id="div-3" style="top:215px;right:38px;">4</div>
<div id="div-4" style="top:215px;right:8px;">5</div>
</div>
<input type="button" value="test" onclick="lunhuan();"/>
</body>
</html>
簡(jiǎn)單的說(shuō)下流程：
1.先定義最外層的DIV
2.再定義緊挨著的圖片DIV
3.圖片右下角的小方塊DIV
用計(jì)時(shí)器函數(shù)，實(shí)現(xiàn)圖片輪換，并讓小方塊也產(chǎn)生對(duì)于的變化。
OK，睡覺(jué)。
相關(guān)文章
js canvas實(shí)現(xiàn)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
js對(duì)列表中第一個(gè)值處理與jsp頁(yè)面對(duì)列表中第一個(gè)值處理的區(qū)別詳解
本文是對(duì)js對(duì)列表中第一個(gè)值處理與jsp頁(yè)面對(duì)列表中第一個(gè)值處理的區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JavaScript獲取時(shí)區(qū)實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了JavaScript獲取時(shí)區(qū)實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
基于原生JS實(shí)現(xiàn)分頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生js實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
使用JavaScript給圖片添加水印的實(shí)現(xiàn)方法封裝
圖片加水印是一種常見(jiàn)的圖像處理技術(shù),通常用于保護(hù)版權(quán)、防止盜用、增加圖片的識(shí)別度等多種場(chǎng)景,這篇文章主要給大家介紹了關(guān)于使用JavaScript給圖片添加水印的實(shí)現(xiàn)方法封裝,需要的朋友可以參考下2024-03-03
JavaScript插件化開(kāi)發(fā)教程 （二）
本系列的開(kāi)篇文章我們一起探討了jQuery如何開(kāi)發(fā)插件，今天這篇文章，我們來(lái)繼續(xù)插件開(kāi)發(fā)之旅，希望大家能夠喜歡。2015-01-01
這篇文章主要介紹了js閉包的相關(guān)知識(shí)，閉包是Javascript的一個(gè)難點(diǎn)，但也是一個(gè)很重要的知識(shí)點(diǎn),需要的朋友可以參考下2015-04-04
基于Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單效果
這篇文章主要為大家詳細(xì)介紹了基于Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
本節(jié)主要介紹了用js判斷日期是否能跨月查詢,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了JavaScript二叉樹(shù)及各種遍歷算法詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07