JS圖片自動輪換效果實(shí)現(xiàn)思路附截圖
更新時間:2014年04月30日 10:51:18 作者:
這篇文章主要介紹了JS實(shí)現(xiàn)的圖片自動輪換效果,有具體的實(shí)現(xiàn)思路及截圖,希望對大家學(xué)習(xí)有所幫助
今天不在狀態(tài),安靜五一快到了,俺就特想玩了。好了,天色已晚,閑話不多說,看下用javaScript 實(shí)現(xià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開始
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>
簡單的說下流程:
1.先定義最外層的DIV
2.再定義緊挨著的圖片DIV
3.圖片右下角的小方塊DIV
用計時器函數(shù),實(shí)現(xiàn)圖片輪換,并讓小方塊也產(chǎn)生對于的變化。
OK,睡覺。

下面是具體的代碼,還是比較簡單的。
復(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開始
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>
簡單的說下流程:
1.先定義最外層的DIV
2.再定義緊挨著的圖片DIV
3.圖片右下角的小方塊DIV
用計時器函數(shù),實(shí)現(xiàn)圖片輪換,并讓小方塊也產(chǎn)生對于的變化。
OK,睡覺。
相關(guān)文章
JavaScript canvas實(shí)現(xiàn)七彩時鐘效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)七彩時鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05uniapp實(shí)現(xiàn)tabBar-switchTab之間的傳參方法
這篇文章主要介紹了uniapp實(shí)現(xiàn)tabBar-switchTab之間的傳參方式,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10利用JS做網(wǎng)頁特效_大圖輪播(實(shí)例講解)
下面小編就為大家?guī)硪黄肑S做網(wǎng)頁特效_大圖輪播(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08