html代码
<html>
<head></head>
<body>
<div class='hpic'> <ul style="position: relative; 100%; transform: translate3d(0px, 0px, 0px);"> <li><a href="#"><img src="p1.png"></a></li> <li class='tranl' style="left: 100%;"><a href="#"><img src="p2.png"></a></li> <li class='tranl' style="left: 200%;"><a href="#"><img src="p3.png"></a></li> <li class='tranl' style="left: 300%;"><a href="#"><img src="p4.png"></a></li> </ul> <span class="indicator"> <i class="active"></i> <i class=""></i> <i class=""></i> <i class=""></i> </span> </div>
</body>
</html>
css代码
.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;}
js代码
//首页幻灯片轮播
var hpic = $('.hpic');
var hpic_num = hpic.find('li').length;
var hpic_index = 0;
setInterval(function(){ if(hpic_index>hpic_num-1){ hpic_index = 0; } 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);