微信小程序既然来了_javascript完成图片轮换动作方法

2021-01-06

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

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

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

 div id="album" 
 a href="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="/rubylouvre/199042/o_s001.jpg" / 
 a href="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="/rubylouvre/199042/o_s002.jpg" / 
 a href="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="/rubylouvre/199042/o_s003.jpg" / 
 a href="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="/rubylouvre/199042/o_s004.jpg" / 
 a href="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="/rubylouvre/199042/o_s005.jpg" / 
 a href="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="/rubylouvre/199042/o_s006.jpg" / 
 /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 

position:relative; /*为图片滑动区*/ height:300px;/*必须设置,用于隐藏图片滑动区多余的部分*/ width:400px;/*必须设置,用于隐藏图片滑动区多余的部分*/ overflow:hidden; background:/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:/rubylouvre/199042/o_button.gif) no-repeat -15px 0; #album span a:hover ,#album span a.hover{ color:#F8F8F8; background-position:0 0; }
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:/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:/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" a href="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="/rubylouvre/199042/o_s001.jpg" / a href="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="/rubylouvre/199042/o_s002.jpg" / a href="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="/rubylouvre/199042/o_s003.jpg" / a href="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="/rubylouvre/199042/o_s004.jpg" / a href="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="/rubylouvre/199042/o_s005.jpg" / a href="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="/rubylouvre/199042/o_s006.jpg" / /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:/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:/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" 
 a href="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="/rubylouvre/199042/o_s001.jpg" / 
 a href="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="/rubylouvre/199042/o_s002.jpg" / 
 a href="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="/rubylouvre/199042/o_s003.jpg" / 
 a href="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="/rubylouvre/199042/o_s004.jpg" / 
 a href="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="/rubylouvre/199042/o_s005.jpg" / 
 a href="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="/rubylouvre/199042/o_s006.jpg" / 
 /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);";

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:/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:/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" a href="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="/rubylouvre/199042/o_s001.jpg" / a href="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="/rubylouvre/199042/o_s002.jpg" / a href="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="/rubylouvre/199042/o_s003.jpg" / a href="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="/rubylouvre/199042/o_s004.jpg" / a href="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="/rubylouvre/199042/o_s005.jpg" / a href="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="/rubylouvre/199042/o_s006.jpg" / /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:/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:/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" 
 a href="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="/rubylouvre/199042/o_s001.jpg" / 
 a href="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="/rubylouvre/199042/o_s002.jpg" / 
 a href="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="/rubylouvre/199042/o_s003.jpg" / 
 a href="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="/rubylouvre/199042/o_s004.jpg" / 
 a href="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="/rubylouvre/199042/o_s005.jpg" / 
 a href="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="/rubylouvre/199042/o_s006.jpg" / 
 /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:/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:/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" 
 a href="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="/rubylouvre/199042/o_s001.jpg" / 
 a href="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="/rubylouvre/199042/o_s002.jpg" / 
 a href="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="/rubylouvre/199042/o_s003.jpg" / 
 a href="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="/rubylouvre/199042/o_s004.jpg" / 
 a href="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="/rubylouvre/199042/o_s005.jpg" / 
 a href="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="/rubylouvre/199042/o_s006.jpg" / 
 /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图片轮换内容请搜索凡科以前的文章或继续浏览下面的



扫描二维码分享到微信

在线咨询
联系电话

400-888-8866