javascript - 如何在Web端实现动画切换效果一致的无限循环图片轮播？

Question

具体问题是这样的，我想要一个能无限循环播放图片的轮播，重点是播放完一轮后，跳回第一张时，切换效果应该和之前一样。即如果动画是从左到右切换的，那么最后一张切换到第一张时，也应该是这个效果。

在网上找了很多 jQuery 的轮播插件，但都不能满足我所想要的效果。Bootstrap 的 Carousel 倒是能用，但源码看不懂。

HTML 代码大致如下：

<p class="carousel">
    <p class="slide"></p>
    <p class="slide"></p>
    <p class="slide"></p>
    <p class="slide"></p>
</p>

CSS 关键代码：

.carousel {
    height: 120px;
    overflow: hidden;
}

.slide {
    height: 120px;
    transition: all .4s ease-in;
}

jQuery关键代码：

$('.slide').each(function(){
        $(this).css('transform', 'translateY(' + (i)*-100 + '%)');          
})

我所写的这个，最后一张是transform: translateY(-300%);，然后就变成了transform: translateY(0%);,所以动画的方向变反了。

这样的写法似乎无法解决这个问题，是否有其他的轮播图写法？

Answer 1

I suggest you use JQERY’s universal JS to change it. The carousel also requires CSS to be completed. And if your .SLIDE only has one PIC, it will be messed up. Separate PIC to add CSS, don't add all clouds. PIC just uses one CSS substyle for each image.

Answer 2

这个思路是:

1. 设置轮播的每个item为absolute，然后再通过z-index覆盖即可。active状态的z-index:2，normal状态为1。
2. 每次轮播left走一个图片的距离。

这样就可以让轮播始终都是一个图片的距离，无论你点击哪个序号（1,2,3,4,5），比如，从当前是第一张轮播，你直接跳到第五张图片，普通轮播会产生4个图片的距离，但是这样始终是一个图片的距离。

其他在尾部克隆插入的方法没法解决以上产生的距离问题。

参考我写的组件：https://github.com/xiaomingming/easySwitch。
demo是easySwitch.html.

Answer 3

三个class，都加absoulte,transition
左：transformX(-100%)
中：transformX(0)
右：tranformX(100%)
每次把当前显示的加为中间的class 小于当前的加左边class，大于的放右边，当最后一个激活的时候，把第一个放右边。只要每次改当前索引值就可以了，动画交给tansition去

Answer 4

原始html：

<ul>
    <li class="slide1">1</p>
    <li class="slide2">2</p>
    <li class="slide3">3</p>
<ul>

先clone slide1 和 slide3，然后变成这样：

<p class="carousel">
    <ul>
        <li class="slide3">3</p>
        <li class="slide1">1</p>
        <li class="slide2">2</p>
        <li class="slide3">3</p>
        <li class="slide1">1</p>
    <ul>
</p>

当动ul翻到最后clone出的slide1后，直接让ul定位到原始的slide1（这个动作不要加动画效果，直接定位），反方向也是如此。

移动端就不是这么做了。每个slide都加absoulte,transition属性，然后监听手势去控制当前触摸的slide和其前后slide的transform。

Answer 5

这个思路说白了其实很简单，比如你要轮播三张图，你可以写四个标签，第一张图和第四张图是一样的，当播完第四张的时候将标签改为第一张的标签。。。手机码字不方便，大概就这个意思，达到欺骗用户眼睛的目的，大部分轮播插件也是这么实现的

Answer 6

给个思路，第一个内容position: relative。然后轮播到最后一个内容的时候，第一个内容添加left值，大小为滚滚容器的宽度减一块内容的宽度。然后接着轮播，就看到了我们相对定位的第一个内容后。把第一个内容的position: static。然后滚动的容器left: 0就做到无缝了。

思路大概是这样了！

有个视频可以做参考：华为轮播图

Answer 7

我觉得 没必要闭门造车。可以看看这个 superslide 一个我用了很多年的插件
源码也比较简单，可以看得懂 。

Answer 8

考虑一下使用Canvas自己画~~？
我觉得用Canvas画反而比较简单方便。而且性能还能好点……

Answer 9

如果要实现这种无缝滚动，需要你补齐你的p.slider。实现这样效果的插件很多，比如楼上说的superslider，还有cxScroll等，如果楼主想看具体的细节，花点时间去研究下这些插件的源码即可，原理很简单。

Answer 10

我想你要的是：当最后一张图片时就轮播到第一张是吗？ 无限轮播是吧？..

这个容易只要一个公式就搞定了.

var prevImg = (currentImg+1)%totalImg; //currentImg是当前的轮播图片，toutalImg是一共多少图片.

这样就能无限了