JS+JQ实现无缝轮播及原理介绍

虽然网上已经多如牛毛关于这个特效实现的介绍，但今天还是想自己撸一份加上自己的理解。

首先来看下什么是无缝轮播什么是非无缝轮播

非无缝轮播图

这是某腾体育的首页轮播图，可以看到当到最后一张返回第一张轮播或者第一张到最后一张时会有一个回拉的动作

这种视觉用户体验比较不友好有种晃眼的感觉。

下面看看无缝轮播效果

无缝轮播效果

可以看到无缝轮播当最后一张到第一张或是第一张到最后一张切换时是一种很平滑的效果，是一种较好的用户体验

下面就来看看用原生的JS是怎么完成的

 

css:

a, ul, li {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.wrap {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

.wrap .left {
    position: absolute;
    top: 142px;
    left: -18px;
}

.wrap .left img {
    width: 80px;
    height: 80px;
}

.wrap .right {
    position: absolute;
    top: 142px;
    right: -16px;
}

.wrap .right img {
    width: 80px;
    height: 80px;
}

.navs {
    width: 4200px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -600px;
    /*transition: all .3s;*/
}

.navs li {
    width: 600px;
    height: 100%;
    float: left;
}

.navs li img {
    width: 100%;
    height: 100%;
}

#bots {
    display: inline-block;
    width: 600px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
}

#bots li {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cccccc;
    position: relative;
    left: 220px;
    top: 10px;
    margin-left: 10px;
    float: left;
}

#bots .active {
    background: red;
}

dom： 

上面的布局在第一张克隆一个最后一张的副本，在最后一张克隆一张第一张的副本

当我们切换到最后一张的时候点击下一张时移动到第一张副本的同时利用js设置css样式迅速切换到真正的第一张这个过程是肉眼无法看到的来达到无缝的目的

 

下面是鼠标每次点击就改变一点点位置，所以我们可以利用定时器来设计很小的时间不断移动位置来实现过渡切换的效果。

js：

 

上面是原生JS去实现那么怎么用JQ实现呢,用JQ 来实现就简单的多了