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

Question

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

巴扎黑 · Answer

实现无缝切换可以多加两张图，在第一张前面加上最后一张图，在最后一张图后面加上第一张图。刚好之前写过一个，JS原生，具体代码如下：
html

js


window.onload = function () {
    var index = 1;
    var switching = false; 

    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var list = document.getElementById('list');
    var wrap = document.getElementById('wrap');
    var dots = document.getElementsByTagName('span');
    var buttons = document.getElementById('buttons');

    wrap.onmouseover = function () {
        prev.style.display = 'block';
        next.style.display = 'block';
        stop();
    };
    wrap.onmouseout = function () {
        prev.style.display = 'none';
        next.style.display = 'none';
        play();
    }

    function lastImg() {
        if (switching) {
            return;
        }
        switchPic(900);
        index--;
        if (index < 1) {
            index = 4;
        }
        else if(index  > 4) {
            index = 1;
        }
        lightDot();
    }

    function nextImg() {
        if (switching) {
            return;
        }
        switchPic(-900);
        index++;
        if (index < 1) {
            index = 4;
        }
        else if(index  > 4) {
            index = 1;
        }
        lightDot();
    }

    function btn(e) {
        if (switching) {
            return;
        }
        e = window.e || e;
        var target = e.target ? e.target: e.srcElement;
        if (target.nodeName.toLowerCase() == 'span') {
            var index1 = target.getAttribute('index');
            var offset = (index - index1) * 900;
            switchPic(offset);
            index = index1;
            lightDot();
        }
    };

    // 切换图片的函数
    function switchPic(offset) {
        switching = true;
        var time = 300;
        var inter = 10; // 隔10ms切换一次
        var speed = Math.ceil(offset/(time/inter));

        var left = parseInt(list.style.left) + offset;

        var go = function () {
            var curLeft = parseInt(list.style.left);
            if ((speed > 0 && curLeft < left) || (speed < 0 && curLeft > left)) {
                list.style.left = curLeft + speed + 'px';
                setTimeout(go, inter);
            }
            else {
                list.style.left = left + 'px';
                if (left < -3600) {
                    list.style.left = -900 + 'px';
                }
                else if (left > -900) {
                    list.style.left = -3600 + 'px';
                }
                switching = false;
            }
        };
        go();
    }

    // 点亮小点
    function lightDot() {
        for (var i = 0, len = dots.length; i < len; i++) {
            if (dots[i].className == 'light') {
                dots[i].className = '';
                break;
            }
        }
        dots[index-1].className = 'light';
    }

    // 自动轮播
    var timer;
    var order;
    var interval;
    var play = function () {
        var interval1 = interval || 2000;
        if (order == 'prev') {
            timer = setInterval(lastImg, interval1);
        }
        else {
            timer = setInterval(nextImg, interval1);
        }
    };
    var stop = function () {
        clearInterval(timer);
    };

    // 事件绑定DOM2
    function addEvent(element, event, listener) {
        if (element.addEventListener) {
            element.addEventListener(event, listener, false);
        }
        else {
            element.attachEvent('on'+event, listener);
        }
    }


    // 点击左右键切图
    addEvent(prev, 'click', lastImg); 
    addEvent(next, 'click', nextImg);
    // 点击小点切图
    addEvent(buttons, 'click', btn); 

    // 指定切换顺序和间隔时间
    order = 'next';
    interval = 2000;

    play();
};

可以建个img文件夹，放几张图片试一下效果，这个是4张图片

ringa_lee · Answer

搜一下PgwSlider插件，可以实现各种各样的图片轮播方式。本人前几天利用此插件完成了一个图片轮播，实现上方显示一张大图，下面陈列全部缩略图的功能。点击左右箭头实现轮播，点击缩略图也能实现大图切换。符合你所要求的点击最后一张图片后以相同方式回到第一张图片。源代码也比较容易读懂。如果需要源码，请回复。

PHP中文网 · Answer

http://flexslider.woothemes.com/
这种效果吗？

大家讲道理 · Answer

可以看看这个~
http://www.owlcarousel.owlgraphic.com/

PHP中文网 · Answer

试试这个 swiper.js
示例 http://www.swiper.com.cn/demo/15-infinite-loop.html

PHPz · Answer

superslide 完美兼容pc
swiper 完美手机端
满足题主一切需求

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

reply all(16)I'll reply