javascript實(shí)現(xiàn)圖片輪換動(dòng)作方法

更新時(shí)間：2020年08月07日 10:06:50 作者：司徒正美

這篇文章主要介紹了javascript實(shí)現(xiàn)圖片輪換動(dòng)作方法，文章通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

圖片輪換是一種相當(dāng)復(fù)雜的技術(shù)，早些年基本用flash實(shí)現(xiàn)。這里有一個(gè)鏈接，教大家如何用flash實(shí)現(xiàn)它的。之所以用flash，是因?yàn)閒lash是基于幀的，這與圖片輪換的原理相當(dāng)接近。為了模擬幀的效果，我們要用到overflow把多余的部分遮罩掉，也就是flash中常說的遮罩層。在Flash中，連時(shí)間軸都是可視的，而我們則全憑想象力與數(shù)學(xué)來計(jì)算現(xiàn)在是到了哪一張圖。加之，flash有Robert Penner大神的緩動(dòng)公式，那實(shí)在太耀眼，直到script.aculo.us類庫搞出自己的緩動(dòng)公式，才扭轉(zhuǎn)局面。

我們來看一看圖片輪換的結(jié)構(gòu)層。它應(yīng)該包含框體，圖片展示區(qū)，圖片滑動(dòng)層與分頁欄。原諒我制造這么多詞匯，因?yàn)闆]有個(gè)名詞講解就難以為繼了，前人也沒有做這樣的總結(jié)，個(gè)個(gè)都不愿意分享一下。框體就是一個(gè)div元素，作用有兩個(gè)：提供相冊(cè)的邊框與作為分頁欄的包含塊。如果不清楚什么叫包含塊（containing block）的話，自己查閱CSS權(quán)威指南吧。接著下來圖片展示區(qū)與圖片滑動(dòng)層，也就是我實(shí)現(xiàn)新式無縫滾動(dòng)的那一種結(jié)構(gòu)，一個(gè)很干凈的無序列表，所有難點(diǎn)都轉(zhuǎn)移到設(shè)置它的CSS上。至于圖片展示區(qū)就是ul元素，大小為一張圖片的大?。粓D片滑動(dòng)層就是那個(gè)li元素，也只有一個(gè)li元素而已，利用CSS強(qiáng)制把它里面的圖片不換行向左浮動(dòng)，并設(shè)置li元素一個(gè)很大很大的寬度，好讓它一行容納所有圖片。分頁欄就是一個(gè)包含許多鏈接的span元素，和普通的水平菜單差不多，只不過要用絕對(duì)定位它安置到框體的右下角。

<div id="album">
 <ul>
 <li>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
  <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
  <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
  <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
  <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
  <img alt="綠·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
  <img alt="又是收獲的季節(jié)" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
  </a>
 </li>
 </ul>
 <span>
 <a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
 <a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
 <a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
 <a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
 <a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
 <a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
 </span>
</div>

#album {
 position:relative;/*為分頁欄準(zhǔn)備的*/
 width:400px;/*必須設(shè)置，為分頁欄準(zhǔn)備*/
 height:300px;/*必須設(shè)置，為分頁欄準(zhǔn)備*/
 border:10px solid #8080C0;
}
#album ul ,#album li {/*消除默認(rèn)樣式*/
 padding:0;
 margin:0;
 list-style:none;
}
#album ul{
 position:relative; /*為圖片滑動(dòng)區(qū)*/
 height:300px;/*必須設(shè)置，用于隱藏圖片滑動(dòng)區(qū)多余的部分*/
 width:400px;/*必須設(shè)置，用于隱藏圖片滑動(dòng)區(qū)多余的部分*/
 overflow:hidden;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li { /*圖片滑動(dòng)區(qū)*/
 position:absolute;
 width:1000%;/*讓里面的所有圖片并列顯示*/
}
#album a {
 float:left;
}
#album img {
 display:block;
 border:0;
}
#album span {/*分頁欄*/
 position:absolute;
 right:0;
 bottom:10px;
}
#album span a{
 display:block;/*讓其擁有盒子模型*/
 margin-right:10px;/*錯(cuò)開格子*/
 width:15px;/*呈正方形*/
 height:15px;
 line-height:15px;
 text-align:center;/*居中顯示*/
 text-decoration:none;/*消除下劃線*/
 color:#808080;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover ,#album span a.hover{
 color:#F8F8F8;
 background-position:0 0;
}

 
<!doctype html>
<title>javascript圖片輪換 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript圖片輪換 by 司徒正美" />
<meta name="description" content="javascript圖片輪換 by 司徒正美" />
<style type="text/css">
 #album {
 position:relative;/*為分頁欄準(zhǔn)備的*/
 width:400px;/*必須設(shè)置，為分頁欄準(zhǔn)備*/
 height:300px;/*必須設(shè)置，為分頁欄準(zhǔn)備*/
 border:10px solid #8080C0;
 }
 #album ul ,#album li {/*消除默認(rèn)樣式*/
 padding:0;
 margin:0;
 list-style:none;
 }
 #album ul{
 position:relative; /*為圖片滑動(dòng)區(qū)*/
 height:300px;/*必須設(shè)置，用于隱藏圖片滑動(dòng)區(qū)多余的部分*/
 width:400px;/*必須設(shè)置，用于隱藏圖片滑動(dòng)區(qū)多余的部分*/
 overflow:hidden;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
 }
 #album li { /*圖片滑動(dòng)區(qū)*/
 position:absolute;
 width:1000%;/*讓里面的所有圖片并列顯示*/
 }
 #album a {
 float:left;
 }
 #album img {
 display:block;
 border:0;
 }
 #album span {/*分頁欄*/
 position:absolute;
 right:0;
 bottom:10px;
 }
 #album span a{
 display:block;/*讓其擁有盒子模型*/
 margin-right:10px;/*錯(cuò)開格子*/
 width:15px;/*呈正方形*/
 height:15px;
 line-height:15px;
 text-align:center;/*居中顯示*/
 text-decoration:none;/*消除下劃線*/
 color:#808080;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
 }
 #album span a:hover ,#album span a.hover{
 color:#F8F8F8;
 background-position:0 0;
 }
</style>
<h4>javascript圖片輪換 by 司徒正美</h4>
<div id="album">
 <ul>
 <li>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
  <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
  <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
  <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
  <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
  <img alt="綠·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
  <img alt="又是收獲的季節(jié)" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
  </a>
 </li>
 </ul>
 <span>
 <a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
 <a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
 <a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
 <a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
 <a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
 <a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
 </span>
</div>

這個(gè)和我以前的系列一樣，不用JS也可以點(diǎn)擊實(shí)現(xiàn)切換。不過以前是用錨點(diǎn)來改變scrollTop的值，現(xiàn)在是改變scrollLeft的值。

如果不使用緩動(dòng)效果，很簡(jiǎn)單。

var Rotate = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 slide = container.getElementsByTagName("li")[0];
 slide.innerHTML += slide.innerHTML;
 var item = slide.getElementsByTagName("a"),
 critical = item[item.length/2].offsetLeft,//臨界值
 distance = critical/(item.length/2),
 delta = - distance;
 (function(){//實(shí)現(xiàn)自動(dòng)輪換圖片
 setTimeout(function(){
  delta = delta - distance;
  if(delta < -critical){
  delta = - distance;
  }
  slide.style.left = delta + "px";//★★★★★★★★
  setTimeout(arguments.callee,1500)
 },1500)
 })()
}

要使用緩動(dòng)，就要?jiǎng)佑梦业木弰?dòng)公式與transition函數(shù)，在星號(hào)的位置中調(diào)用。

 
<!doctype html>
<title>javascript圖片輪換 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript圖片輪換 by 司徒正美" />
<meta name="description" content="javascript圖片輪換 by 司徒正美" />
<style type="text/css">
 #album {
 position:relative;
 width:400px;
 height:300px;
 border:10px solid #8080C0;
 }

 #album ul,#album li {
 list-style:none;
 margin:0;
 padding:0;
 }

 #album ul {
 position:relative;
 height:300px;
 width:400px;
 overflow:hidden;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
 }

 #album li {
 position:absolute;
 width:1000%;
 }

 #album a {
 float:left;
 }

 #album img {
 display:block;
 border:0;
 }

 #album span {
 position:absolute;
 right:0;
 bottom:10px;
 }

 #album span a {
 display:block;
 margin-right:10px;
 width:15px;
 height:15px;
 line-height:15px;
 text-align:center;
 text-decoration:none;
 color:gray;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
 }

 #album span a:hover,#album span a.hover {
 color:#F8F8F8;
 background-position:0 0;
 }
</style>
<script type="text/javascript">
 var spring= function(pos) {
 return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
 }
 var transition = function(el){
 var options = arguments[1] || {},
 begin = options.begin,//開始位置
 change = options.change,//變化量
 duration = options.duration || 500,//緩動(dòng)效果持續(xù)時(shí)間
 ftp = options.ftp || 50,
 onEnd = options.onEnd || function(){},
 ease = options.ease,//要使用的緩動(dòng)公式
 end = begin + change,//結(jié)束位置
 startTime = new Date().getTime();//開始執(zhí)行的時(shí)間
 (function(){
  setTimeout(function(){
  var newTime = new Date().getTime(),//當(dāng)前幀開始的時(shí)間
  timestamp = newTime - startTime,//逝去時(shí)間
  delta = ease(timestamp / duration);
  el.style.left = Math.ceil(begin + delta * change) + "px"
  if(duration <= timestamp){
   el.style.left = end + "px";
   onEnd();
  }else{
   setTimeout(arguments.callee,1000/ftp);
  }
  },1000/ftp)
 })()
 }
 var Rotate = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 slide = container.getElementsByTagName("li")[0],
 paginater = container.getElementsByTagName("span")[0],
 links = paginater.getElementsByTagName("a"),
 length = links.length, aBefore = length, aIndex;
 slide.innerHTML += slide.innerHTML;
 var item = slide.getElementsByTagName("a"),
 critical = item[length].offsetLeft,//臨界值
 distance = critical/length,
 delta = - distance;
 (function(){//實(shí)現(xiàn)自動(dòng)輪換圖片
  setTimeout(function(){
  delta = delta - distance;
  if(delta < -critical){
   delta = - distance;
  }
  aIndex = - delta/distance;
  links[aBefore-1].className = "";
  links[aIndex-1].className = "hover";
  aBefore = aIndex;
  transition(slide,{begin:delta,change:distance,ease:spring})
  setTimeout(arguments.callee,1500)
  },1500)
 })()
 }
 window.onload = function(){
 Rotate("album");
 }
</script>
<h4>javascript圖片輪換 by 司徒正美</h4>
<div id="album">
 <ul>
 <li>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
  <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
  <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
  <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
  <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
  <img alt="綠·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
  <img alt="又是收獲的季節(jié)" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
  </a>
 </li>
 </ul>
 <span>
 <a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
 <a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
 <a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
 <a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
 <a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
 <a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
 </span>
</div>

我們也可以像第一部分那樣加入一個(gè)信息欄，這樣程序就擁有三個(gè)定時(shí)器了，看起來讓人有點(diǎn)頭暈，現(xiàn)實(shí)中不提倡這樣做，這里只是試范一下如何使用transition的回調(diào)函數(shù)罷了。

//動(dòng)態(tài)生成li元素并把它插入到DOM樹中。
var tip = document.createElement("li");//信息欄
tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
 tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
}else{
 tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
}

 
<!doctype html>
<title>javascript圖片輪換 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript圖片輪換 by 司徒正美" />
<meta name="description" content="javascript圖片輪換 by 司徒正美" />
<style type="text/css">
 #album {
 position:relative;
 width:400px;
 height:300px;
 border:10px solid #8080C0;
 }

 #album ul,#album li {
 list-style:none;
 margin:0;
 padding:0;
 }

 #album ul {
 position:relative;
 height:300px;
 width:400px;
 overflow:hidden;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
 }

 #album li {
 position:absolute;
 width:1000%;
 }

 #album a {
 float:left;
 }

 #album img {
 display:block;
 border:0;
 }

 #album span {
 position:absolute;
 right:0;
 bottom:10px;
 }

 #album span a {
 display:block;
 margin-right:10px;
 width:15px;
 height:15px;
 line-height:15px;
 text-align:center;
 text-decoration:none;
 color:gray;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
 }

 #album span a:hover,#album span a.hover {
 color:#F8F8F8;
 background-position:0 0;
 }
</style>
<script type="text/javascript">
 var easeInOutCubic= function(pos){
 if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
 return 0.5 * (Math.pow((pos-2),3) + 2);
 }

 var transition = function(el){
 var options = arguments[1] || {},
 begin = options.begin,//開始位置
 change = options.change,//變化量
 duration = options.duration || 500,//緩動(dòng)效果持續(xù)時(shí)間
 ftp = options.ftp || 50,
 onEnd = options.onEnd || function(){},
 ease = options.ease,//要使用的緩動(dòng)公式
 end = begin + change,//結(jié)束位置
 startTime = new Date().getTime();//開始執(zhí)行的時(shí)間
 (function(){
  setTimeout(function(){
  var newTime = new Date().getTime(),//當(dāng)前幀開始的時(shí)間
  timestamp = newTime - startTime,//逝去時(shí)間
  delta = ease(timestamp / duration);
  el.style.left = Math.ceil(begin + delta * change) + "px"
  if(duration <= timestamp){
   el.style.left = end + "px";
   onEnd();
  }else{
   setTimeout(arguments.callee,1000/ftp);
  }
  },1000/ftp)
 })()
 }
 var Rotate = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 slide = container.getElementsByTagName("li")[0],
 paginater = container.getElementsByTagName("span")[0],
 links = paginater.getElementsByTagName("a"),
 images = slide.getElementsByTagName("img"),
 length = links.length, aBefore = length, aIndex;
 slide.innerHTML += slide.innerHTML;
 var tip = document.createElement("li");
 tip.style.cssText = "position:absolute;bottom:-40px;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
 slide.parentNode.appendChild(tip);
 if(!+"\v1"){
  tip.style.color = "#369";
  tip.style.filter = "alpha(opacity=67)"
 }else{
  tip.style.cssText += "background: rgba(164, 173, 183, .65);"
 }
 var item = slide.getElementsByTagName("a"),
 critical = item[length].offsetLeft,//臨界值
 distance = critical/length,
 delta = - distance;
 (function(){//實(shí)現(xiàn)自動(dòng)輪換圖片
  setTimeout(function(){
  delta = delta - distance;
  if(delta < -critical){
   delta = - distance;
  }
  aIndex = - delta/distance;
  tip.innerHTML = images[aIndex-1].getAttribute("alt");
  tip.style.bottom = "-40px";
  links[aBefore-1].className = "";
  links[aIndex-1].className = "hover";
  aBefore = aIndex;
  transition(slide,{begin:delta,change:distance,ease:easeInOutCubic,onEnd:function(){
   move(tip);
  }})
  setTimeout(arguments.callee,2000)
  },2000)
 })()
 }
 var move = function(el){
 var begin = parseFloat(el.style.bottom),speed = 1;
 el.bottom = begin;
 (function(){
  setTimeout(function(){
  el.style.bottom = el.bottom + speed + "px";//移動(dòng)
  el.bottom += speed;
  speed *= 1.5;//下一次移動(dòng)的距離
  if(el.bottom >= 0){
   el.style.bottom = "0px";
  }else{
   setTimeout(arguments.callee,25);//每移動(dòng)一次停留25毫秒
  }
  },25)
 })()
 }
 window.onload = function(){
 Rotate("album");
 }
</script>
<h4>javascript圖片輪換 by 司徒正美</h4>
<div id="album">
 <ul>
 <li>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
  <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
  <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
  <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
  <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
  <img alt="綠·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
  <img alt="又是收獲的季節(jié)" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
  </a>
 </li>
 </ul>
 <span>
 <a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
 <a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
 <a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
 <a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
 <a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
 <a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
 </span>
</div>

最后為信息欄上的按鈕綁定點(diǎn)擊事件就行了。

 
<!doctype html>
<title>javascript圖片輪換 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript圖片輪換 by 司徒正美" />
<meta name="description" content="javascript圖片輪換 by 司徒正美" />
<style type="text/css">
 #album {
 position:relative;
 width:400px;
 height:300px;
 border:10px solid #8080C0;
 }

 #album ul,#album li {
 list-style:none;
 margin:0;
 padding:0;
 }

 #album ul {
 position:relative;
 height:300px;
 width:400px;
 overflow:hidden;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
 }

 #album li {
 position:absolute;
 width:1000%;
 }

 #album a {
 float:left;
 }

 #album img {
 display:block;
 border:0;
 }

 #album span {
 position:absolute;
 right:0;
 bottom:10px;
 }

 #album span a {
 display:block;
 margin-right:10px;
 width:15px;
 height:15px;
 line-height:15px;
 text-align:center;
 text-decoration:none;
 color:gray;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
 }

 #album span a:hover,#album span a.hover {
 color:#F8F8F8;
 background-position:0 0;
 }
</style>
<script type="text/javascript">
 var easeInOutCubic= function(pos){
 if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
 return 0.5 * (Math.pow((pos-2),3) + 2);
 }

 var transition = function(el){
 var options = arguments[1] || {},
 begin = options.begin,//開始位置
 change = options.change,//變化量
 duration = options.duration || 500,//緩動(dòng)效果持續(xù)時(shí)間
 ftp = options.ftp || 50,
 onEnd = options.onEnd || function(){},
 ease = options.ease,//要使用的緩動(dòng)公式
 end = begin + change,//結(jié)束位置
 startTime = new Date().getTime();//開始執(zhí)行的時(shí)間
 (function(){
  setTimeout(function(){
  var newTime = new Date().getTime(),//當(dāng)前幀開始的時(shí)間
  timestamp = newTime - startTime,//逝去時(shí)間
  delta = ease(timestamp / duration);
  el.style.left = Math.ceil(begin + delta * change) + "px"
  if(duration <= timestamp){
   el.style.left = end + "px";
   onEnd();
  }else{
   setTimeout(arguments.callee,1000/ftp);
  }
  },1000/ftp)
 })()
 }
 var Rotate = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 slide = container.getElementsByTagName("li")[0],
 paginater = container.getElementsByTagName("span")[0],
 links = paginater.getElementsByTagName("a"),
 images = slide.getElementsByTagName("img"),
 length = links.length, aBefore = length, aIndex = 1;
 slide.innerHTML += slide.innerHTML;
 var tip = document.createElement("li");//信息欄
 tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
 slide.parentNode.appendChild(tip);
 if(!+"\v1"){
  tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
 }else{
  tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
 }
 var item = slide.getElementsByTagName("a"),
 critical = item[length].offsetLeft,//臨界值
 distance = critical/length,
 delta = - distance;
 paginater.onclick = function(e){//實(shí)現(xiàn)手動(dòng)切換
  e = e || window.event;
  var target = e.srcElement ? e.srcElement : e.target;
  if(target.nodeName.toLowerCase() == "a"){//事件代理
  var _aIndex = aIndex;
  aIndex = target.getAttribute("href").slice(-1);
   !+"\v1" ?(e.returnValue = false) :(e.preventDefault());
  delta = - distance * _aIndex;
  var change = (aIndex - _aIndex) * distance;
  if(aIndex >= _aIndex){
   transition(slide,{begin:delta,change: change,ease:easeInOutCubic})
  }else{
   transition(slide,{begin:delta,change: -change,ease:easeInOutCubic})
  }
  }
 };
 (function(){/*實(shí)現(xiàn)自動(dòng)輪換圖片*/
  setTimeout(function(){
  (aIndex > length) && (aIndex = 1);
  delta = - distance * aIndex;
  tip.innerHTML = images[aIndex-1].getAttribute("alt");//改變信息欄的文字
  links[aBefore-1].className = "";//改變按鈕的樣式
  links[aIndex-1].className = "hover";//改變按鈕的樣式
  aBefore = aIndex;
  aIndex++;
  transition(slide,{begin:delta,change:distance,ease:easeInOutCubic})
  setTimeout(arguments.callee,2000)
  },2000)
 })()
 }
 window.onload = function(){
 Rotate("album");
 }
</script>
<h4>javascript圖片輪換 by 司徒正美</h4>
<div id="album">
 <ul>
 <li>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
  <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
  <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
  <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
  <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
  <img alt="綠·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
  <img alt="又是收獲的季節(jié)" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
  </a>
 </li>
 </ul>
 <span>
 <a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
 <a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
 <a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
 <a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
 <a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
 <a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
 </span>
</div>

有的人很懶，不喜歡點(diǎn)擊，想在按鈕上一掠而過也能看到效果。這簡(jiǎn)單，我們把綁定函數(shù)獨(dú)立出來，分別綁定到onclick事件與onmouseover事件上就行了?，F(xiàn)在我們換一個(gè)緩動(dòng)公式，反正這東西多著呢。比如這個(gè)pulse，像蛇信子一樣來回多次振動(dòng)（默認(rèn)5次，有第二個(gè)參數(shù)可以自己調(diào)，我調(diào)到10次），非常有意思。你們可以試試一下子掠過所有按鈕，效果是何等的炫目！

 
<!doctype html>
<title>javascript圖片輪換 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript圖片輪換 by 司徒正美" />
<meta name="description" content="javascript圖片輪換 by 司徒正美" />
<style type="text/css">
 #album {
 position:relative;
 width:400px;
 height:300px;
 border:10px solid #F2F1D7;
 }

 #album ul,#album li {
 list-style:none;
 margin:0;
 padding:0;
 }

 #album ul {
 position:relative;
 height:300px;
 width:400px;
 overflow:hidden;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
 }

 #album li {
 position:absolute;
 width:1000%;
 }

 #album a {
 float:left;
 }

 #album img {
 display:block;
 border:0;
 }

 #album span {
 position:absolute;
 right:0;
 bottom:10px;
 }

 #album span a {
 display:block;
 margin-right:10px;
 width:15px;
 height:15px;
 line-height:15px;
 text-align:center;
 text-decoration:none;
 color:gray;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
 }

 #album span a:hover,#album span a.hover {
 color:#F8F8F8;
 background-position:0 0;
 }
</style>
<script type="text/javascript">
 var pulse = function(pos, pulses) {
 return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
 }

 var transition = function(el){
 var options = arguments[1] || {},
 begin = options.begin,//開始位置
 change = options.change,//變化量
 duration = options.duration || 500,//緩動(dòng)效果持續(xù)時(shí)間
 ftp = options.ftp || 50,
 onEnd = options.onEnd || function(){},
 ease = options.ease,//要使用的緩動(dòng)公式
 end = begin + change,//結(jié)束位置
 startTime = new Date().getTime();//開始執(zhí)行的時(shí)間
 (function(){
  setTimeout(function(){
  var newTime = new Date().getTime(),//當(dāng)前幀開始的時(shí)間
  timestamp = newTime - startTime,//逝去時(shí)間
  delta = ease(timestamp / duration,10);
  el.style.left = Math.ceil(begin + delta * change) + "px"
  if(duration <= timestamp){
   el.style.left = end + "px";
   onEnd();
  }else{
   setTimeout(arguments.callee,1000/ftp);
  }
  },1000/ftp)
 })()
 }
 var Rotate = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 slide = container.getElementsByTagName("li")[0],
 paginater = container.getElementsByTagName("span")[0],
 links = paginater.getElementsByTagName("a"),
 images = slide.getElementsByTagName("img"),
 length = links.length, aBefore = length, aIndex = 1;
 slide.innerHTML += slide.innerHTML;
 var tip = document.createElement("li");//信息欄
 tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
 slide.parentNode.appendChild(tip);
 if(!+"\v1"){
  tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
 }else{
  tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
 }
 var item = slide.getElementsByTagName("a"),
 critical = item[length].offsetLeft,//臨界值
 distance = critical/length,
 delta = - distance;
 var manualSlippage = function(){
  var e = arguments[0] || window.event;
  var target = e.srcElement ? e.srcElement : e.target;
  if(target.nodeName.toLowerCase() == "a"){//事件代理
  var _aIndex = aIndex;
  aIndex = target.getAttribute("href").slice(-1);
   !+"\v1" ?(e.returnValue = false) :(e.preventDefault());
  delta = - distance * _aIndex;
  var change = (aIndex - _aIndex) * distance;
  (aIndex >= _aIndex) && (change = -change);
  transition(slide,{begin:delta,change: change,ease:pulse});
  }
 }
 paginater.onmouseover = manualSlippage;
 paginater.onclick = manualSlippage;
 (function(){/*實(shí)現(xiàn)自動(dòng)輪換圖片*/
  setTimeout(function(){
  (aIndex > length) && (aIndex = 1);
  delta = - distance * aIndex;
  tip.innerHTML = images[aIndex-1].getAttribute("alt");//改變信息欄的文字
  links[aBefore-1].className = "";//改變按鈕的樣式
  links[aIndex-1].className = "hover";//改變按鈕的樣式
  aBefore = aIndex;
  aIndex++;
  transition(slide,{begin:delta,change:distance,ease:pulse})
  setTimeout(arguments.callee,2000)
  },2000)
 })()
 }
 window.onload = function(){
 Rotate("album");
 }
</script>
<h4>javascript圖片輪換 by 司徒正美</h4>
<div id="album">
 <ul>
 <li>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
  <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
  <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
  <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
  <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
  <img alt="綠·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
  </a>
  <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
  <img alt="又是收獲的季節(jié)" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
  </a>
 </li>
 </ul>
 <span>
 <a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
 <a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
 <a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
 <a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
 <a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
 <a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
 </span>
</div>
<p>使用的是多次搖晃的殘影特效pulse.<p>

到此這篇關(guān)于javascript實(shí)現(xiàn)圖片輪換動(dòng)作方法的文章就介紹到這了,更多相關(guān)javascript圖片輪換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: