将自动滚动添加到 JavaScript 滑块答案

【问题标题】：Adding Autoscroll to a JavaScript slider将自动滚动添加到 JavaScript 滑块
【发布时间】：2012-11-05 21:36:13
【问题描述】：

我有一个简单的问题，我似乎无法弄清楚。我的网站中有一个 JavaScript 滑块，我是 working on。您需要手动单击此滑块中的下一个图像。我想让滑块自动滚动图像。这是代码，下面是我尝试过的：

//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); 添加到代码的底部：

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);
}
})();

我真的是 JavaScript 新手，不知道我做错了什么。我真的很感激任何帮助！谢谢。

【问题讨论】：

标签： javascript jquery slider carousel jquery-slider

【解决方案1】：

您不能将值传递给 setInterval，您必须传递一个函数才能执行。试试这个：

setInterval('showSlide(current + 1);', 10000);

问候

【讨论】：

感谢安德里亚的帮助。我试着把你的代码和我的代码放在同一个地方，但它仍然没有用。我最初认为因为上面的函数 showSlide ， setInterval 会起作用，但我意识到由于多种原因这没有任何意义。上面的 if 语句中是否需要删除某些内容，还是应该将代码按不同的顺序排列？
其实我建议你把setInterval放到nav.onclick = function(e)之外，在它之后和if (document.getElementById('carousel-nav'))关闭之前
如果我理解正确，请告诉我。我移动了 'setInterval('showSlide(current + 1);', 10000);'向下两行如下所示：'} setInterval('showSlide(current + 1);', 1000); })();'有没有更好的合作方式？
正确，这样 setInterval 将是 IF 语句关闭之前的最后一个命令。它应该工作:-)
嗯。它仍然无法正常工作。我得亲自寻求帮助。当我弄清楚它为什么不起作用时，我会更新我的答案。感谢您的帮助！

【解决方案2】：

另一个答案很接近，确实帮助我解决了这个问题。唯一的问题是语法有点偏离。

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

以上内容最终对我有用。所以这就是上面代码中的样子：

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);
})();

下一步是弄清楚如何让滑块在到达最后一张幻灯片后重复回到第一张幻灯片。

再次感谢安德里亚的帮助！

【讨论】：