利用transform制作幻灯片

<div class=‘hpic white‘>
        <ul style="position: relative; width: 100%; transform: translate3d(0px, 0px, 0px);">
            <li><a href="#"><img src="__IMG__/p3.png"></a></li>
            <li class=‘tranl‘ style="left: 100%;"><a href="#"><img src="__IMG__/p2.png"></a></li>
            <li class=‘tranl‘ style="left: 200%;"><a href="#"><img src="__IMG__/p3.png"></a></li>
            <li class=‘tranl‘ style="left: 300%;"><a href="#"><img src="__IMG__/p4.png"></a></li>
        </ul>
        <span class="indicator" style="margin-left: -38.5px;">
            <i class="active"></i>
            <i class=""></i>
            <i class=""></i>
            <i class=""></i>
        </span>

    </div>

.hpic{height: auto;
overflow: hidden;
position: relative;}
.hpic .tranl{
position: absolute; 
width: 100%; 
top: 0px; 
}
.hpic img{width: 100%;}
.hpic .indicator {
    position: absolute;
    left: 50%;
    bottom: 2px;
    line-height: 0;
    padding: 2px 3px 2px 8px;
    border-radius: 5px;
    background: rgba(0,0,0,.3);
}
.hpic .indicator i {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background: #fff;
    margin-right: 5px;
}
.hpic .indicator .active{
    background-color: #f60;
}

setInterval(function(){
        if(hpic_index>hpic_num-1){
            hpic_index = 0;
        }//-webkit-transform 0.3s ease 0s
        hpic.find(‘ul‘).css(‘transform‘,‘translate3d(-‘+ 100*hpic_index +‘%, 0px, 0px)‘);
        hpic.find(‘ul‘).css(‘transition‘,‘-webkit-transform 0.3s ease 0s‘);
        hpic.find(‘i‘).removeClass(‘active‘);
        hpic.find(‘i‘).eq(hpic_index).addClass(‘active‘);
        hpic_index ++ ;
    },4000);