Zepto.js 实现轮播图-优快云博客

本文介绍如何使用 Zepto.js 构建一个无缝滚动的轮播图，包括响应式设计、动画效果、触控手势及轮播点同步等功能。

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

不管是在学习中还是在工作中，我们做的许多项目都会用到轮播图尤其是电商网站！

做轮播图的方式有许许多多，可以通过 css3的transform,transition, 原生js，jquery的animate, zepto(与jquery类似但比它小，轻量级的，一般用于移动端，因为不考虑兼容问题) ,bootstrap插件，swiper滑动插件来做(可用于实际开发中，提高效率)......

下面我将用zepto.js来实现轮播图：

1.首先下载zepto模块（https://github.com/madrobby/zepto）

2.在页面中引入src 下的（我需要用到的模块，具体你需要用什么模块就参考https://www.css88.com/doc/zeptojs_api/#modules）

zepto.min.js (包含zepto.js,event.js,ajax.js,from.js,ie.js五个摸块如果没有就引用这5个)

selector.js（支持 jQuery CSS 表达式实用功能）

fx.js （The animate()方法）

touch.js（在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。）

详细见下列代码：

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>zepto轮播图</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
<section class="lb_banner container">
  <div>
    <ul class="clearFix images_box">
      <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
    </ul>
    <ul class="clearFix points_box">
      <li class="now"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <span class="left_btn">&lt</span>
    <span class="right_btn">&gt</span>
  </div>
</section>
<script src="lib/zepto/zepto.min.js"></script>
<!--扩展选择器-->
<script src="lib/zepto/selector.js"></script>
<!--做动画-->
<script src="lib/zepto/fx.js"></script>
<!--手势-->
<script src="lib/zepto/touch.js"></script>
<script src="js/index.js"></script>
</body>
</html>

css代码：

/*======reset css======*/
* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 14px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/*======modal css======*/
.container {
  max-width: 750px;
  min-width: 320px;
  width: 100%;
  margin: 0 auto;
}

.clearFix::before,
.clearFix::after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}

/*轮播图样式*/
.lb_banner div {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.lb_banner ul:first-child {
  width: 1000%;
}

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

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

.lb_banner ul:last-of-type {
  position: absolute;
  width:200px;
  height:20px;
  bottom:4px;
  left:50%;
  transform: translateX(-100px);

}
.lb_banner ul:last-of-type li{
  width:12px;
  height:12px;
  background:#fff;
  float:left;
  border-radius: 50%;
  margin-left:12px;
}
.lb_banner ul:last-of-type li.now{
   background:orange;
}
.lb_banner>div>span{
  display:block;
  width:50px;
  height:80px;
  position:absolute;
  top:50%;
  transform: translateY(-40px);
  line-height:80px;
  font-weight: 800;
  color:#fff;
  text-align: center;
  font-size:50px;
}
.lb_banner>div>span:hover{
  background:#333333;
  opacity:0.6;
}
.lb_banner .left_btn{
  left:0;
}
.lb_banner .right_btn{
 right:0;
}

js功能代码：

本人功能中动画使用的是transfrom:translateX(),切记，如果您不是用的zepto而是jquery，jquery不支持translateX（）属性，还有移动端手势就必须得通过touch的三个事件演变而来。

//需求分析;
//1.实现无缝的轮播图
//2.点跟着轮播图改变且对应
//3.左右按钮点击切换上一张/下一张
//4.点击点跳到当前点对应的图片
//5.实现移动端手势效果
$(function(){
 banner();
});
function banner() {
  var $bannerBox = $(".lb_banner");
  var $imagesBox = $(".images_box");
  var $lis = $(".points_box li");
  var $leftBtn = $(".left_btn");
  var $rightBtn = $(".right_btn");
  var imageWidth = $bannerBox.width();
  $imagesBox.css({"transform": "translateX(" + (-imageWidth + "px") + ")"});
  var index=1;
  var timerId=setInterval(function(){
    index++;
    animationFuc();
  },2000);
function animationFuc(){
  $imagesBox.animate({"transform": "translateX(" + (-index*imageWidth + "px") + ")"},200,function(){
    if(index>8){
      index=1;
      $imagesBox.css({"transform": "translateX(" + (-index*imageWidth + "px") + ")"});
    }else if(index<1){
      index=8;
      $imagesBox.css({"transform": "translateX(" + (-index*imageWidth + "px") + ")"});
    }
    $lis.removeClass("now").eq(index-1).addClass("now");
  });
}
  $leftBtn.on("click",function(){
    index--;
    animationFuc();
  });
  $rightBtn.on("click",function(){
    index++;
    animationFuc();
  });
  $lis.on("tap click",function(){
    index=$(this).index()+1;
    $imagesBox.css({"transform": "translateX(" + (-index*imageWidth + "px") + ")"});
    $(this).addClass("now").siblings("li").removeClass("now");
  });
  /*3.完成手势切换  android 4.0 兼容 */
  /*左滑的手势  下一张*/
  $imagesBox.on('swipeLeft',function () {
    index ++;
    animationFuc();
  });
  /*右滑的手势  上一张*/
  $imagesBox.on('swipeRight',function () {
    index --;
    animationFuc();
  });
  $bannerBox.on("mouseenter",function(){
    clearInterval(timerId);
  });
  $bannerBox.on("mouseleave",function(){
    timerId=setInterval(function(){
      index++;
      animationFuc();
    },2000);
  })
}

就这些代码，一个完整的轮播图是实现完了。