CSS3 tranisitions下的图片轮转切换效果实例页面

CSS代码：

.trans_box{
    width: 400px;
    margin: 20px;
    overflow: hidden;
}
.trans_image_box {
    width: 2000px;
    height: 300px;
    -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 {
    width: 400px;
    float: left;
}
.trans_image_trigger {
    padding-top: 10px;
    text-align: center;
}
                

HTML代码：

<div class="trans_box">
    <div id="transImageBox" class="trans_image_box">
        <img class="trans_image" src="//image.zhangxinxu.com/image/study/p/s500/ps1.jpg" />
        <img class="trans_image" src="//image.zhangxinxu.com/image/study/p/s500/ps2.jpg" />
        <img class="trans_image" src="//image.zhangxinxu.com/image/study/p/s500/ps3.jpg" />
        <img class="trans_image" src="//image.zhangxinxu.com/image/study/p/s500/ps4.jpg" />
    </div>
    <div id="transImageTrigger" class="trans_image_trigger">
        <a href="#1">图片1</a>　<a href="#2">图片2</a>　<a href="#3">图片3</a>　<a href="#4">图片4</a>
    </div>
</div>
                

JS代码：

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