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;
       };
 }

点击查看演示效果