CSS3实现轮播切换效果

   实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作，大盒子固定大小，超出盒子范围进行隐藏，而里面无限个元素可以任何堆叠，按照一定的步骤进行位置变换，已达到在可视区域呈现我们想要的效果。

  看一个实例：

 HTML代码：

<div class="trans_box">
<div id="transImageBox" class="trans_image_box">
    <div class="trans_image" style="width:300px;height:200px;background:blue;">111</div>
    <div class="trans_image" style="width:300px;height:200px;background:red;">222</div>
    <div class="trans_image" style="width:300px;height:200px;background:orange;">333</div>
</div>
<div id="transImageTrigger" class="trans_image_trigger">
    <a href="#1">图片1</a>　<a href="#2">图片2</a>　<a href="#3">图片3</a>
</div>
</div>

CSS代码：

.trans_box {
    width:300px;
    overflow:hidden;
}
.trans_image_box {
    width:20000px;
    height:200px;
    -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
}
.trans_image_box .trans_image {
    float:left;
    width:200px;
}
.trans_image_trigger {
    padding-top: 10px;
    text-align: center;
}

JS代码：

var $ = function(id) {
    return document.getElementById(id);
};
var $box = $("transImageBox"),
     $oTrigger = $("transImageTrigger").getElementsByTagName("a"),
     $len = $oTrigger.length;
for(var i = 0; i < $len; i++) {
      $oTrigger[i].onclick = function(){
            var index = Number(this.href.replace(/.*#/g,'')) || 1;
            $box.style.marginLeft = (1 - index) * 300 + "px";
            return false;
      };
}

     点击查看演示效果