使用Zepto.js实现移动端的轮播图效果

沐小侠

已于 2022-02-11 16:45:05 修改

阅读量789

点赞数 1

分类专栏： HTML+CSS+JS 文章标签： javascript 前端 css3

于 2022-02-11 16:43:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41092938/article/details/122883696

版权

HTML+CSS+JS 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了Zepto.js，一个轻量级的JavaScript库，它提供了类似于jQuery的API。文章通过示例代码展示了如何使用Zepto.js在移动端实现自动滚动的图片轮播效果，包括左右滑动触发轮播及动态指示器。代码中包含了CSS样式和事件监听，适合移动端开发使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。

Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

API类似jQuery，熟悉jQuery可以无缝迁移到Zepto.js。
Zepto仅针对高版本现代浏览器设计了最小核心的通用库，代码体积小，尤其适合移动端开发。
Zepto增加了针对移动端的触摸和手势相关的事件。 Zepto模块化做的很灵活，可以自定义组合模块。

开发版（57.3k 未压缩，包含注释）：https://zeptojs.com/zepto.js
生产版（9.6k gzip压缩）：https://zeptojs.com/zepto.min.js

实现效果：

自动的滚动起来
点随之滚动起来
图片滑动效果

实现代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 移动站一定要设置viewport -->
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
        <style>
            /**
             * 公共样式：重置css
             */
            *,::before,::after{
                /* 选择所有的标签 */
                margin: 0;
                padding: 0;
                /* 清楚移动端默认的点击高亮 */
                -webkit-tap-highlight-color: transparent;
                /* 设置所有的都是以边框开始计算宽度百分比 */
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            body{
                font-size: 14px;
                font-family: "microsoft yahei",sans-serif;/* 设备默认字体 */
                color: #333;
            }
            a{
                color: #333;
                text-decoration: none;
            }
            a:hover{
                text-decoration: none;
            }
            
            ul,ol{
                list-style: none;
            }
            /* 清除浮动 */
            .clearfix::before,.clearfix::after{
                content: ".";
                display: block;
                clear: both;
                height: 0;
                line-height: 0;
                visibility: hidden;
            }
            /*主体盒子*/
            .a_layout {
                width: 100%;
                max-width: 640px;
                /*设计图的原因  不然它放大*/
                min-width: 300px;
                /*为了更好的布局*/
                margin: 0 auto;
                position: relative;
            }
            /* 轮播图 */
            .a_banner {
                width: 100%;
                position: relative;
                overflow: hidden;
            }

            .a_banner>ul:first-child {
                width: 1000%;
                -webkit-transform: translateX(-10%);
                transform: translateX(-10%);
            }

            .a_banner>ul:first-child>li {
                width: 10%;
                float: left;
            }

            .a_banner>ul:first-child>li>a {
                width: 100%;
                display: block;
            }

            .a_banner>ul:first-child>li>a>img {
                width: 100%;
                display: block;
            }

            .a_banner>ul:last-child {
                width: 118px;
                height: 6px;
                position: absolute;
                bottom: 6px;
                left: 50%;
                margin-left: -59px;
            }

            .a_banner>ul:last-child>li {
                width: 6px;
                height: 6px;
                float: left;
                border-radius: 3px;
                border: 1px solid #fff;
                margin-left: 10px;
            }

            .a_banner>ul:last-child>li.now {
                background: #fff;
            }

            .a_banner>ul:last-child>li:nth-child(1) {
                margin-left: 0;
            }
        </style>
    </head>
    <body>
        <div class="a_layout">
            <div class="a_banner">
                <ul class="clearfix">
                    <li><a href="#"><img src="img/l8.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l4.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l5.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l6.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l7.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l8.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="img/l1.jpg" alt="" /></a></li>
                </ul>
                <ul>
                    <li class="now"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <script src="js/zepto/zepto.js" type="text/javascript"></script>
        <script src="js/zepto/selector.js" type="text/javascript"></script>
        <script src="js/zepto/fx.js" type="text/javascript"></script>
        <script src="js/zepto/touch.js" type="text/javascript"></script>
        <script>
            $(function(){
                //获取图片轮播的盒子
                var $banner = $('.a_banner')
                //获取盒子宽度
                var width = $banner.width()
                //获取图片盒子
                var imageBox = $banner.find('ul:eq(0)')
                //获取圆点盒子
                var pointBox = $banner.find('ul:eq(1)')
                //获取所有的远点
                var points = pointBox.find('li')
                function animateFunction(){
                    imageBox.animate({'transform':'translateX('+(-index*width)+'px)'},200,'ease',function(){
                        if(index>=9){
                            index=1
                            //瞬间定位
                            imageBox.css({'transform':'translateX('+(-index*width)+'px)'})
                        }else if(index<0){
                            index=8
                            //瞬间定位  
                            imageBox.css({'transform':'translateX('+(-index*width)+'px)'})
                        }
                        points.removeClass('now').eq(index-1).addClass('now')
                    })
                }
                var index = 1
                //自动的滚动起来
                var timer = setInterval(function(){
                    index++
                    animateFunction()
                },5000)
                //左滑动
                imageBox.on('swipeLeft',function(){
                    index++
                    animateFunction()
                })
                //右滑动
                imageBox.on('swipeRight',function(){
                    index--
                    animateFunction()
                })
                
            })
        </script>
    </body>
</html>