用box固定長(zhǎng)寬實(shí)現(xiàn)圖片自動(dòng)輪播js代碼
更新時(shí)間：2014年06月09日 10:38:53 作者：
這篇文章主要介紹了用box固定長(zhǎng)寬實(shí)現(xiàn)圖片自動(dòng)輪播效果,需要的朋友可以參考下
這個(gè)小DEMO，主要用box固定長(zhǎng)寬用于顯示圖片，將圖片放入imagebox中，連接起來，每次換圖片則將imagebox的style屬性的margin-left改動(dòng)，能形成輪播的效果。
<!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>無標(biāo)題文檔</title>
<style>
.box {
width: 900px;
height: 350px;
margin: 20px;
overflow: hidden;
margin:0 auto;
}
.imagebox {
width: 3600px;
height: 350px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.imagebox img {
width: 900px;
float: left;
height: 350px;
}
</style>
</head>
<body>
<div class="box">
<div id="ImageBox" class="imagebox">
<img class="trans_image" src="images/圖片點(diǎn)擊輪轉(zhuǎn)/image-53.jpg" />
<img class="trans_image" src="images/圖片點(diǎn)擊輪轉(zhuǎn)/image-54.jpg"/>
<img class="trans_image" src="images/圖片點(diǎn)擊輪轉(zhuǎn)/image-55.jpg"/>
<img class="trans_image" src="images/圖片點(diǎn)擊輪轉(zhuǎn)/image-56.jpg"/>
</div>
</div>
<div>
<input type="button" value="left" onclick="turnleft()"/>
<input type="button" value="right" onclick="turnright()"/>
</div>
<script language="javascript">
var int=setInterval("change()",3*1000);
var a=document.getElementById("ImageBox");
var i=1;
function change(){
if(i==4){
i=0;
}
i=i+1;
a.style.marginLeft=(1-i)*900+"px";
}
function stopchange(){clearInterval(int);}
function startchange(){int=setInterval("change()",2*1000);}
a.onmouseover=function(){clearInterval(int);}
a.onmouseout=function() {int=setInterval("change()",2*1000);}
function turnleft(){
stopchange();
i=i+1;
a.style.marginLeft=(1-i)*900+"px";
if(i==4){
i=0;
}
startchange();
}
function turnright(){
stopchange();
if(i>1){
a.style.marginLeft=(2-i)*900+"px";
i=i-1;
}else{
a.style.marginLeft=-3*900+"px";
i=4;
}
startchange();
}
</script>
</body>
</html>
復(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>無標(biāo)題文檔</title>
<style>
.box {
width: 900px;
height: 350px;
margin: 20px;
overflow: hidden;
margin:0 auto;
}
.imagebox {
width: 3600px;
height: 350px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.imagebox img {
width: 900px;
float: left;
height: 350px;
}
</style>
</head>
<body>
<div class="box">
<div id="ImageBox" class="imagebox">
<img class="trans_image" src="images/圖片點(diǎn)擊輪轉(zhuǎn)/image-53.jpg" />
<img class="trans_image" src="images/圖片點(diǎn)擊輪轉(zhuǎn)/image-54.jpg"/>
<img class="trans_image" src="images/圖片點(diǎn)擊輪轉(zhuǎn)/image-55.jpg"/>
<img class="trans_image" src="images/圖片點(diǎn)擊輪轉(zhuǎn)/image-56.jpg"/>
</div>
</div>
<div>
<input type="button" value="left" onclick="turnleft()"/>
<input type="button" value="right" onclick="turnright()"/>
</div>
<script language="javascript">
var int=setInterval("change()",3*1000);
var a=document.getElementById("ImageBox");
var i=1;
function change(){
if(i==4){
i=0;
}
i=i+1;
a.style.marginLeft=(1-i)*900+"px";
}
function stopchange(){clearInterval(int);}
function startchange(){int=setInterval("change()",2*1000);}
a.onmouseover=function(){clearInterval(int);}
a.onmouseout=function() {int=setInterval("change()",2*1000);}
function turnleft(){
stopchange();
i=i+1;
a.style.marginLeft=(1-i)*900+"px";
if(i==4){
i=0;
}
startchange();
}
function turnright(){
stopchange();
if(i>1){
a.style.marginLeft=(2-i)*900+"px";
i=i-1;
}else{
a.style.marginLeft=-3*900+"px";
i=4;
}
startchange();
}
</script>
</body>
</html>
相關(guān)文章
jQuery.extend()的實(shí)現(xiàn)方式詳解及實(shí)例
extend()函數(shù)是jQuery的基礎(chǔ)函數(shù)之一，作用是擴(kuò)展現(xiàn)有的對(duì)象2013-06-06
js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法,實(shí)例分析了javascript操作拖動(dòng)層的技巧,需要的朋友可以參考下2015-03-03
利用types增強(qiáng)vscode中js代碼提示功能詳解
這篇文章主要給大家介紹了如何增強(qiáng)vscode中js代碼提示功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了Javascript中window.name屬性詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了js輪盤抽獎(jiǎng)實(shí)例，分析js輪盤抽獎(jiǎng)實(shí)現(xiàn)原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了webstorm中vue語法的支持詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
下面小編就為大家?guī)硪黄肑S寫的一個(gè)Ajax庫(實(shí)例代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
前端項(xiàng)目打包部署后如何避免讓用戶強(qiáng)制去清除瀏覽器緩存
這篇文章主要介紹了前端項(xiàng)目打包部署后如何避免讓用戶強(qiáng)制去清除瀏覽器緩存的相關(guān)資料,文中講解了瀏覽器緩存機(jī)制及其對(duì)性能優(yōu)化的重要性,探討了如何通過設(shè)置Cache-Control頭部、添加資源版本號(hào)或利用Webpack的文件命名特性來控制緩存,需要的朋友可以參考下2024-12-12
JavaScript實(shí)現(xiàn)頁面跳轉(zhuǎn)的方式匯總
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁面跳轉(zhuǎn)的方式匯總的相關(guān)資料,需要的朋友可以參考下2016-05-05
40行原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由
路由就是指隨著瀏覽器地址欄的變化,展示給用戶的頁面也不相同,下面這篇文章主要給大家介紹了關(guān)于如何通過40行原生js代碼實(shí)現(xiàn)前端簡(jiǎn)易路由的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05