利用transform制作幻灯片

最新推荐文章于 2025-07-06 13:15:03 发布

weixin_30873847

最新推荐文章于 2025-07-06 13:15:03 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

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

本文介绍了一个简单的轮播图实现方案，使用HTML、CSS和JavaScript构建。通过设置图片位置和过渡效果，实现平滑切换。

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