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

我建议你用JQERY的通用JS来改。轮播还需要CSS来配合才可以完成。而且你的.SLIDE只有一个PIC就乱了。要分开PIC来加CSS，不要全加上云。PIC用每个图一个CSS子样式就可。

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是一共多少图片.

这样就能无限了