宗小宗-PHP程序猿

欢迎各位朋友前来，如果我的文章中有不对的地方，还望指正；如需转载，请注明原处

利用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: 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);

 

posted @ 2015-12-23 21:01  宗小宗  阅读(326)  评论(0)  编辑  收藏  举报