首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现图片轮换动作方法

Posted in Javascript onAugust 07, 2020

图片轮换是一种相当复杂的技术，早些年基本用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图片轮换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

javascript实现图片轮换动作方法

- Author -

司徒正美

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
vue style width a href动态拼接问题的解决
Aug 07 #Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 #Javascript
JavaScript实现与web通信的方法详解
Aug 07 #Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 #Javascript
JavaScript实现多文件下载方法解析
Aug 07 #Javascript
基于javascript的无缝滚动动画1
Aug 07 #Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 #Javascript
GCN(1) 柱状图(1) 验证码(1) Pytesseract(1) 裁剪图片(1) SFTP(3) Python(3) 鲲鹏(1) PIL(1) Flask(2)
You might like
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
深入理解JavaScript系列(6)：S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
浅析Python 条件控制语句
2020/07/15 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
Nebula美国官网：便携式投影仪
2019/03/15 全球购物
荷兰照明、灯具和配件网上商店：dmlights
2019/08/25 全球购物
澳大利亚最受欢迎的女士度假服装：Kabana Shop
2020/10/10 全球购物
房屋转让协议书
2014/04/11 职场文书
工作表扬信范文
2015/01/17 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
公司处罚决定书
2015/06/24 职场文书
React中的Context应用场景分析
2021/06/11 Javascript