swiper手写分析

前言

开发时使用支付宝小程序swiper组件有一些问题，当滑动到最后一项时，在最后一项滑动到第一项的过程中会有一部分空白。于是扒了下swiper，想用jquery实现一次swiper的基础功能。

一、swiper渲染

绘制轮播图的样式，用jq获取轮播总个数，创建并渲染轮播底部指示器

<div class="swiper">
    <!--轮播图-->
    <ul class="inner clearfix">
        <li><img src="https://juejin.cn/post/images/11.png"  /></li>
        <li><img src="https://juejin.cn/post/images/22.png"  /></li>
        <li><img src="https://juejin.cn/post/images/33.png"  /></li>
        <li><img src="https://juejin.cn/post/images/44.png"  /></li>
        <li><img src="https://juejin.cn/post/images/55.png"  /></li>
    </ul>
    <!--指示器-->
    <ol class="indicators clearfix"></ol>
    <!--控制器-->
    <div class="control">
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>
</div>
复制代码

获取轮播数组长度，渲染每个轮播item对应的指示器

var lists = $(".inner li").length
$(".inner").width(100 * (lists + 1) + "%")
$(".inner li").width(100 / (lists + 1) + "%")
for (var i = 0; i < lists; i++) {
  $("<li></li>").appendTo(".swiper .indicators")
}
$(".indicators li").eq(0).addClass("current")

/*轮播图*/
.swiper ul.inner{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
.swiper ul.inner li{
    float: left;
    height: 100%;
}
.swiper ul.inner li:hover{
    cursor: move;
}
.swiper ul.inner li img{
    width: 100%;
    height: 100%;
}
/*指示器*/
.swiper ol.indicators{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.swiper ol.indicators li{
    float: left;
    width: 5vw;
    height: 5vw;
    max-width: 15px;
    max-height: 15px;
    text-align: center;
    cursor: pointer;
    background-color: lightgray;
    margin: 0 3px;
    border-radius: 50%;
    border: 3px darkslategray solid;

}
.swiper ol.indicators li.current{
    background-color: orange;
    border-color: #fff;
}
复制代码

二、点击底部指示器切换展示当前item

定义参考值，获取每次位移的距离，鼠标选择指示器时，改变指示器的样式，将当前指示器添加current类，去掉所有兄弟的current类样式，轮播的图片对应移动几个轮播图大小。

使用jq的mouseenter属性，在用户点击底部指示器轮播点点时，获取鼠标滑过的为第几个，使用animate，在500ms内将轮播的当前index滚动到指示器所在的轮播图处。

var index = 0;
var step = $(".inner li").width();
$(".indicators li")
  .mouseenter(function() {
  $(this).addClass("current").siblings().removeClass("current")
  index = $(this).index()
  $(".inner").stop().animate({
    left: -index * step
  }, 500)
})
复制代码

三、点击鼠标手动切换当前item

1、实现无缝对接

将第一张图克隆一份到最后。这样总共有6张图，5个指示器。

$(".inner li").eq(0).clone(true).appendTo(".inner")
复制代码

2、鼠标点击左侧右侧切换

获取每次位移的距离，即轮播item的宽度。点击之后，索引值加一，图片animate动画移动500毫秒内实现切换。

显示最后一张图时，指示器指示第一个，其余情况指示器指示索引值对应的轮播item。

定义结束条件：索引值不能一直变大。当索引值大于轮播数组长度时将值归零，并将整个轮播图瞬间归位。

 $(".prev").click(function(){
        step = $(".inner li").width();
        if (index == lists) {
            $(".inner").css("left", 0)
            index = 0;
        }
        index++;
        $(".inner").stop().animate({
            left: -index * step
        }, 500)
        if (index == lists) {
            $(".indicators li").eq(0).addClass("current").siblings().removeClass("current")
        } else {
            $(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
        }
    })
复制代码

右侧点击切换

$(".next").click(function() {
  step = $(".inner li").width();
  if (index == 0) {
    $(".inner").css("left", -lists * step)
    index = lists;
  }
  index--;
  $(".inner").stop().animate({
    left: -index * step
  }, 500)
  $(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
})
复制代码

三、swiper自动轮播

使用定时器，每两秒循环调用点击左侧按钮的事件，实现每两秒切换轮播图。

var time = setInterval(function() {
  $(".prev").trigger('click')
}, 2000)
复制代码

四、手动切换与自动轮播的兼容

使用hover属性获取鼠标进入的状态，在鼠标进入时清除计时器，停止轮播事件继续调用，在鼠标离开之后重新开启循环调用切换事件实现轮播效果。

$(".swiper").hover(function() {
        clearInterval(time)
    }, function() {
        time = setInterval(function() {
            $(".prev").trigger('click')
        }, 2000)
    })
复制代码