利用transform制作幻灯片

最新推荐文章于 2022-09-20 09:50:52 发布

weixin_30873847

最新推荐文章于 2022-09-20 09:50:52 发布

阅读量73

点赞数

原文链接：http://www.cnblogs.com/xiaozong/p/5071284.html

版权

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);

转载于:https://www.cnblogs.com/xiaozong/p/5071284.html

weixin_30873847

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用transform制作幻灯片

html代码<html><head></head><body><div class='hpic'> <ul style="position: relative; width: 100%; transform: translate3d(0px, 0px, 0px);"> &lt...
复制链接

扫一扫