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 相关文章推荐
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
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
You might like
星际争霸秘籍
2020/03/04 星际争霸
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Angular路由简单学习
2016/12/26 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
python协程之动态添加任务的方法
2019/02/19 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
小学评语大全
2014/04/22 职场文书
社区工作者个人总结
2015/02/28 职场文书
教师节校长致辞
2015/07/31 职场文书
公司管理制度范本
2015/08/03 职场文书