2

我在这个 Shopify 主题中有一个轮播，我正在尝试对其进行编辑以使其每 5 秒自动滚动到下一张幻灯片（而不必单击到下一张幻灯片）。

这是我用于轮播的内容：

//Carousel interaction
(function() {
    if (document.getElementById('carousel-nav')) {
        var slides = document.getElementById('carousel-images'),
            slidesItems = slides.getElementsByTagName('li'),
            nav = document.getElementById('carousel-nav'),
            navItems = nav.getElementsByTagName('li'),
            current = 0;

        function showSlide(i) {
            if (i != current && slidesItems[i]) {
                slide = slidesItems[i];
                slide.className += ' show';
                setTimeout (function() {
                    slide.className = slide.className.replace('show', 'appear');                    
                }, 1);
                setTimeout(function() {
                    slidesItems[current].className = slidesItems[current].className.replace('current', '');
                    slide.className = slide.className.replace('appear', 'current');
                    current = i;
                }, 300);
                navItems[i+1].className += ' current';
                navItems[current+1].className = navItems[current+1].className.replace('current', '');
                if (i == 0) {
                    if (navItems[0].className.indexOf('disabled') == -1) {
                        navItems[0].className += ' disabled';
                    }
                } else {
                    navItems[0].className = navItems[0].className.replace(' disabled', '');
                }
                var l = navItems.length - 1;
                if (i == slidesItems.length - 1) {
                    if (navItems[l].className.indexOf('disabled') == -1) {
                        navItems[l].className += ' disabled';
                    }
                } else {
                    navItems[l].className = navItems[l].className.replace(' disabled', '');
                }
            }
        }   

        nav.onclick = function(e) {
            e = e || window.event; e = e.target || e.srcElement;
            e = getParentByTagName(e, 'A');
            if (e) {
                var action = e.getAttribute('data-action');
                if (action == 'prev') {
                    showSlide(current - 1);
                } else if (action == 'next') {
                    showSlide(current + 1);
                } else {
                    showSlide(parseInt(action));
                }
            }
            return false;
        }
    }
})();

有任何想法吗？我有点难过。

谢谢！

4

4 回答 4

3

让我跟进最后一个答案，因为这个想法是正确的。你想要做的是创建一个自我延续的循环。一种方法是在您拥有的 if 语句的末尾再次调用 slide 函数。为此，我们将使用 setInterval()，有两个参数，第一个是函数（当我们加 1 时），第二次，以毫秒为单位（在本例中，我们将其设置为 10秒（10000 毫秒）。

您的代码应该类似于以下内容：

//Carousel interaction
(function() {
if (document.getElementById('carousel-nav')) {
    var slides = document.getElementById('carousel-images'),
        slidesItems = slides.getElementsByTagName('li'),
        nav = document.getElementById('carousel-nav'),
        navItems = nav.getElementsByTagName('li'),
        current = 0;

    function showSlide(i) {
        if (i != current && slidesItems[i]) {
            slide = slidesItems[i];
            slide.className += ' show';
            setTimeout (function() {
                slide.className = slide.className.replace('show', 'appear');                    
            }, 1);
            setTimeout(function() {
                slidesItems[current].className = slidesItems[current].className.replace('current', '');
                slide.className = slide.className.replace('appear', 'current');
                current = i;
            }, 300);
            navItems[i+1].className += ' current';
            navItems[current+1].className = navItems[current+1].className.replace('current', '');
            if (i == 0) {
                if (navItems[0].className.indexOf('disabled') == -1) {
                    navItems[0].className += ' disabled';
                }
            } else {
                navItems[0].className = navItems[0].className.replace(' disabled', '');
            }
            var l = navItems.length - 1;
            if (i == slidesItems.length - 1) {
                if (navItems[l].className.indexOf('disabled') == -1) {
                    navItems[l].className += ' disabled';
                }
            } else {
                navItems[l].className = navItems[l].className.replace(' disabled', '');
            }
        }
    }   

    nav.onclick = function(e) {
        e = e || window.event; e = e.target || e.srcElement;
        e = getParentByTagName(e, 'A');
        if (e) {
            var action = e.getAttribute('data-action');
            if (action == 'prev') {
                showSlide(current - 1);
            } else if (action == 'next') {
                showSlide(current + 1);
            } else {
                showSlide(parseInt(action));
            }
        }
        return false;
    }

    setInterval(current+1, 10000);
}
})();
于 2012-10-23T17:25:42.750 回答
1

语法有点不对劲。这将做到：

setInterval(function() { showSlide(current + 1) }, 5000);

它应该放在代码的更下方，所以它不在 nav.onclick 块之外，但仍然在原始函数中。请参见下面的示例。

nav.onclick = function(e) {
            e = e || window.event; e = e.target || e.srcElement;
            e = getParentByTagName(e, 'A');
            if (e) {
                var action = e.getAttribute('data-action');
                if (action == 'prev') {
                    showSlide(current - 1);
                } else if (action == 'next') {
                    showSlide(current + 1);
                } else {
                    showSlide(parseInt(action));
                }
            }
            return false;
        }

    }
        setInterval(function() { showSlide(current + 1) }, 5000);
    })();
于 2012-11-06T05:47:54.967 回答
1

这只是showSlide()每五秒触发一次方法的问题，使用类似setTimeout().

为了让它前进到下一张幻灯片，你会开火showSlide(current + 1)。

于 2012-10-23T04:42:20.340 回答
0

如果您想在单击按钮后停止滚动，请务必将该 setInterval 添加到变量中，然后在单击时使用 clearInterval 停止它。请参阅下面的代码。

var rotation = setInterval(function() { showSlide(current + 1) }, 7000);

        nav.onclick = function(e) {
            e = e || window.event; e = e.target || e.srcElement;
            e = getParentByTagName(e, 'A');
            if (e) {
                var action = e.getAttribute('data-action');
                if (action == 'prev') {
                    showSlide(current - 1);
                } else if (action == 'next') {
                    showSlide(current + 1);
                } else {
                    showSlide(parseInt(action));
                }
            }
            clearInterval(rotation);
            return false;
        }
于 2013-11-20T23:59:14.440 回答