用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)文章
這篇文章主要介紹了詳解webpack loader和plugin編寫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
JavaScript調(diào)用瀏覽器打印功能實(shí)例分析
這篇文章主要介紹了JavaScript調(diào)用瀏覽器打印功能的方法,實(shí)例分析了針對(duì)各種常用瀏覽器調(diào)用打印功能的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
本文通過實(shí)例代碼給大介紹了js多文件上傳的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
微信小程序使用swiper組件實(shí)現(xiàn)類3D輪播圖
在寫微信小程序時(shí)，有寫到實(shí)現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實(shí)現(xiàn)。下面通過實(shí)例代碼給大家介紹微信小程序輪播圖的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2018-08-08
javascript實(shí)現(xiàn) 百度翻譯 可折疊的分享按鈕列表
這篇文章主要介紹了javascript實(shí)現(xiàn) 百度翻譯 可折疊的分享按鈕列表的方法,需要的朋友可以參考下2015-03-03
d3.js 地鐵軌道交通項(xiàng)目實(shí)戰(zhàn)
這篇文章主要介紹了d3.js 地鐵軌道交通項(xiàng)目實(shí)戰(zhàn),本文通過實(shí)例代碼項(xiàng)目截圖給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11
javascript如何操作HTML下拉列表標(biāo)簽
下拉列表在網(wǎng)站前端開發(fā)中經(jīng)常遇到，如何操作html下拉列表標(biāo)簽，本篇文章給大家詳解javascript如何操作html下拉列表標(biāo)簽，需要的朋友可以來參考下2015-08-08
JavaScript的內(nèi)置對(duì)象Math和字符串詳解
這篇文章主要為大家介紹了JavaScript的內(nèi)置對(duì)象Math和字符串，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
inputSuggest文本框輸入時(shí)提示、自動(dòng)完成效果(郵箱輸入自動(dòng)補(bǔ)全插件)
inputSuggest在文本框輸入字符時(shí)提示，類似Windows的“自動(dòng)完成”功能，當(dāng)在文本框輸入字符時(shí)，與此相關(guān)的內(nèi)容會(huì)顯示在文本框的下邊，你可隨時(shí)使用鍵盤或鼠標(biāo)點(diǎn)選那些提示，你就不用輸入了2012-05-05
js和jQuery以及easyui實(shí)現(xiàn)對(duì)下拉框的指定賦值方法
下面小編就為大家分享一篇js和jQuery以及easyui實(shí)現(xiàn)對(duì)下拉框的指定賦值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01