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

点击查看演示效果