利用transform制作幻灯片

html代码

<html>
<head></head>
<body>
<div class='hpic'>

        <ul style="position: relative; width: 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:;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);

秒客网

利用transform制作幻灯片

相关文章