javascript图片轮换2

图片轮换是一种相当复杂的技术，早些年基本用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" id="index1">
        <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index2">
        <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index3">
        <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index4">
        <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index5">
        <img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index6">
        <img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
      </a>
    </li>
  </ul>
  <span>
    <a href="#index1">1</a>
    <a href="#index2">2</a>
    <a href="#index3">3</a>
    <a href="#index4">4</a>
    <a href="#index5">5</a>
    <a href="#index6">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" id="index1">
        <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index2">
        <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index3">
        <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index4">
        <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index5">
        <img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index6">
        <img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
      </a>
    </li>
  </ul>
  <span>
    <a href="#index1">1</a>
    <a href="#index2">2</a>
    <a href="#index3">3</a>
    <a href="#index4">4</a>
    <a href="#index5">5</a>
    <a href="#index6">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函数，在星号的位置中调用。

#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" id="index1">
        <img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index2">
        <img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index3">
        <img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index4">
        <img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index5">
        <img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
      </a>
      <a href="http://www.cnblogs.com/rubylouvre" id="index6">
        <img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
      </a>
    </li>
  </ul>
  <span>
    <a href="#index1">1</a>
    <a href="#index2">2</a>
    <a href="#index3">3</a>
    <a href="#index4">4</a>
    <a href="#index5">5</a>
    <a href="#index6">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);";
}

#album ul,#album li {
    list-style:none;
    margin:0;
    padding: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: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);
  }

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

#album ul,#album li {
    list-style:none;
    margin:0;
    padding: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;
  }

有的人很懒，不喜欢点击，想在按钮上一掠而过也能看到效果。这简单，我们把绑定函数独立出来，分别绑定到onclick事件与onmouseover事件上就行了。现在我们换一个缓动公式，反正这东西多着呢。比如这个pulse，像蛇信子一样来回多次振动（默认5次，有第二个参数可以自己调，我调到10次），非常有意思。你们可以试试一下子掠过所有按钮，效果是何等的炫目！

#album ul,#album li {
    list-style:none;
    margin:0;
    padding: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: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;
  }