蝙蝠岛资源网

javascript实现图片轮换动作方法
网络编程 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

图片轮换是一种相当复杂的技术，早些年基本用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="/UploadFiles/2021-04-02/o_s001.jpg">





#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="/UploadFiles/2021-04-02/o_s001.jpg">


这个和我以前的系列一样，不用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="/UploadFiles/2021-04-02/o_s001.jpg">


我们也可以像第一部分那样加入一个信息栏，这样程序就拥有三个定时器了，看起来让人有点头晕，现实中不提倡这样做，这里只是试范一下如何使用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="/UploadFiles/2021-04-02/o_s001.jpg">


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





 
<!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 "a"){//事件代理
  var _aIndex = aIndex;
  aIndex = target.getAttribute("href").slice(-1);
   !+"\v1" "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="/UploadFiles/2021-04-02/o_s001.jpg">


有的人很懒，不喜欢点击，想在按钮上一掠而过也能看到效果。这简单，我们把绑定函数独立出来，分别绑定到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 "a"){//事件代理
  var _aIndex = aIndex;
  aIndex = target.getAttribute("href").slice(-1);
   !+"\v1" "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="/UploadFiles/2021-04-02/o_s001.jpg">


                                

                                

                                     

                                

                                    标签：
                                        
javascript图片轮换,javascript轮换

                                     

                                
蝙蝠岛资源网 Design By www.hbtsch.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
蝙蝠岛资源网 Design By www.hbtsch.com

                        

                            

                                
                                
                                    评论“javascript实现图片轮换动作方法”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无javascript实现图片轮换动作方法的评论...

                                    

                                

                            

                        

                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.hbtsch.com
                                            
                                                蝙蝠岛资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            139,976影音资源
                                        

                                        

                                            144,792福利资源
                                        

                                        

                                            21,817软件资源
                                        

                                        

                                            631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com