javascript实现图片轮换动作方法

更新时间：2020年08月07日 10:06:50 作者：司徒正美

这篇文章主要介绍了javascript实现图片轮换动作方法，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

图片轮换是一种相当复杂的技术，早些年基本用flash实现。这里有一个链接，教大家如何用flash实现它的。之所以用flash，是因为flash是基于帧的，这与图片轮换的原理相当接近。为了模拟帧的效果，我们要用到overflow把多余的部分遮罩掉，也就是flash中常说的遮罩层。在Flash中，连时间轴都是可视的，而我们则全凭想象力与数学来计算现在是到了哪一张图。加之，flash有Robert Penner大神的缓动公式，那实在太耀眼，直到script.aculo.us类库搞出自己的缓动公式，才扭转局面。

我们来看一看图片轮换的结构层。它应该包含框体，图片展示区，图片滑动层与分页栏。原谅我制造这么多词汇，因为没有个名词讲解就难以为继了，前人也没有做这样的总结，个个都不愿意分享一下。框体就是一个div元素，作用有两个：提供相册的边框与作为分页栏的包含块。如果不清楚什么叫包含块（containing block）的话，自己查阅CSS权威指南吧。接着下来图片展示区与图片滑动层，也就是我实现新式无缝滚动的那一种结构，一个很干净的无序列表，所有难点都转移到设置它的CSS上。至于图片展示区就是ul元素，大小为一张图片的大小；图片滑动层就是那个li元素，也只有一个li元素而已，利用CSS强制把它里面的图片不换行向左浮动，并设置li元素一个很大很大的宽度，好让它一行容纳所有图片。分页栏就是一个包含许多链接的span元素，和普通的水平菜单差不多，只不过要用绝对定位它安置到框体的右下角。

<div id="album">
 <ul>
 <li>
  <a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="又是收获的季节" 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;/*为分页栏准备的*/
 width:400px;/*必须设置，为分页栏准备*/
 height:300px;/*必须设置，为分页栏准备*/
 border:10px solid #8080C0;
}
#album ul ,#album li {/*消除默认样式*/
 padding:0;
 margin:0;
 list-style:none;
}
#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:#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;/*为分页栏准备的*/
 width:400px;/*必须设置，为分页栏准备*/
 height:300px;/*必须设置，为分页栏准备*/
 border:10px solid #8080C0;
 }
 #album ul ,#album li {/*消除默认样式*/
 padding:0;
 margin:0;
 list-style:none;
 }
 #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:#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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="又是收获的季节" 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>

这个和我以前的系列一样，不用JS也可以点击实现切换。不过以前是用锚点来改变scrollTop的值，现在是改变scrollLeft的值。

如果不使用缓动效果，很简单。

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(){//实现自动轮换图片
 setTimeout(function(){
  delta = delta - distance;
  if(delta < -critical){
  delta = - distance;
  }
  slide.style.left = delta + "px";//★★★★★★★★
  setTimeout(arguments.callee,1500)
 },1500)
 })()
}

要使用缓动，就要动用我的缓动公式与transition函数，在星号的位置中调用。

 
<!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,//缓动效果持续时间
 ftp = options.ftp || 50,
 onEnd = options.onEnd || function(){},
 ease = options.ease,//要使用的缓动公式
 end = begin + change,//结束位置
 startTime = new Date().getTime();//开始执行的时间
 (function(){
  setTimeout(function(){
  var newTime = new Date().getTime(),//当前帧开始的时间
  timestamp = newTime - startTime,//逝去时间
  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(){//实现自动轮换图片
  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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="又是收获的季节" 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>

我们也可以像第一部分那样加入一个信息栏，这样程序就拥有三个定时器了，看起来让人有点头晕，现实中不提倡这样做，这里只是试范一下如何使用transition的回调函数罢了。

//动态生成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,//缓动效果持续时间
 ftp = options.ftp || 50,
 onEnd = options.onEnd || function(){},
 ease = options.ease,//要使用的缓动公式
 end = begin + change,//结束位置
 startTime = new Date().getTime();//开始执行的时间
 (function(){
  setTimeout(function(){
  var newTime = new Date().getTime(),//当前帧开始的时间
  timestamp = newTime - startTime,//逝去时间
  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(){//实现自动轮换图片
  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";//移动
  el.bottom += speed;
  speed *= 1.5;//下一次移动的距离
  if(el.bottom >= 0){
   el.style.bottom = "0px";
  }else{
   setTimeout(arguments.callee,25);//每移动一次停留25毫秒
  }
  },25)
 })()
 }
 window.onload = function(){
 Rotate("album");
 }
</script>
<h4>javascript图片轮换 by 司徒正美</h4>
<div id="album">
 <ul>
 <li>
  <a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="又是收获的季节" 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>

最后为信息栏上的按钮绑定点击事件就行了。

 
<!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,//缓动效果持续时间
 ftp = options.ftp || 50,
 onEnd = options.onEnd || function(){},
 ease = options.ease,//要使用的缓动公式
 end = begin + change,//结束位置
 startTime = new Date().getTime();//开始执行的时间
 (function(){
  setTimeout(function(){
  var newTime = new Date().getTime(),//当前帧开始的时间
  timestamp = newTime - startTime,//逝去时间
  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){//实现手动切换
  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(){/*实现自动轮换图片*/
  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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="又是收获的季节" 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>

有的人很懒，不喜欢点击，想在按钮上一掠而过也能看到效果。这简单，我们把绑定函数独立出来，分别绑定到onclick事件与onmouseover事件上就行了。现在我们换一个缓动公式，反正这东西多着呢。比如这个pulse，像蛇信子一样来回多次振动（默认5次，有第二个参数可以自己调，我调到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,//缓动效果持续时间
 ftp = options.ftp || 50,
 onEnd = options.onEnd || function(){},
 ease = options.ease,//要使用的缓动公式
 end = begin + change,//结束位置
 startTime = new Date().getTime();//开始执行的时间
 (function(){
  setTimeout(function(){
  var newTime = new Date().getTime(),//当前帧开始的时间
  timestamp = newTime - startTime,//逝去时间
  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(){/*实现自动轮换图片*/
  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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="又是收获的季节" 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>

到此这篇关于javascript实现图片轮换动作方法的文章就介绍到这了,更多相关javascript图片轮换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js获取判断上传文件后缀名的示例代码
本篇文章主要是对js获取判断上传文件后缀名的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
layui layer select 选择被遮挡的解决方法
今天小编就为大家分享一篇layui layer select 选择被遮挡的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript toUpperCase()方法使用详解
这篇文章主要为大家详细介绍了JavaScript toUpperCase()方法的使用技巧，感兴趣的小伙伴们可以参考一下
2016-08-08
javascript 动态脚本添加的简单方法
下面小编就为大家带来一篇javascript 动态脚本添加的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
JavaScript简单实现动态改变HTML内容的方法示例
这篇文章主要介绍了JavaScript简单实现动态改变HTML内容的方法,结合实例形式分析了javascript简单获取及修改HTML元素的相关操作技巧,非常简单易懂,需要的朋友可以参考下
2018-12-12
javascript验证内容为数字以及长度为10的简单实例
下面小编就为大家带来一篇javascript验证内容为数字以及长度为10的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
如何将一个String和多个String值进行比较思路分析
开发中我们经常需要将一个String和多个String值进行比较。直觉反应是使用||符号连接多个===完成，感兴趣的朋友可以了解下哈
2013-04-04
xmlplus组件设计系列之列表（4）
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
Nuxt3 布局layouts和NuxtLayout的使用详解
layouts是Nuxt3提供的一种方便开发者快速实现自定义布局的约定，是基于Vue3的一个开发框架，基于服务器端渲染SSR，可以更加方便的用于Vue的SEO优化，这篇文章主要介绍了Nuxt3 布局layouts和NuxtLayout的使用,需要的朋友可以参考下
2023-04-04
JS新包管理工具yarn和npm的对比与使用入门
在2016年10月11日facebook 公开了新的javascript包管理工具 yarn, 用来替代目前被广泛使用的npm(nodejs 自带的包管理工具)，本文将介绍yarn工具带来的优点和使用入门，以及对比npm解决了什么问题，带来哪些便利。有需要的朋友们下面来一起看看吧。
2016-12-12

javascript实现图片轮换动作方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具