Question

我在互联网上找到这个响应式图像滑块的片段每件事情都很好但我需要添加自动幻灯片功能，我是jquery领域的新手所以很少需要帮助。

$(document).ready(function(){
    var $slider = $('.slider');
    var $slideBox = $slider.find('.slide-box');
    var $leftControl = $slider.find('.slide-left');
    var $rightControl = $slider.find('.slide-right');
    var $slides = $slider.find('.slide');
    var numItems = $slider.find('.slide').length;
    var position = 0;

    /*on click functionality */
    var windowWidth = $(window).width();
    $slides.width(windowWidth);
    $leftControl.on('click', function(){
        var width = $slider.width();
        position = position - 1 >= 0 ? position - 1 : numItems - 1;
        if(position != numItems-1){
            $slider.find('.slide').eq(position + 1).css('margin-left', 0);
        }
        else{
            $slider.find('.slide:gt(0)').each(function(index){
                $(this).css('margin-left', width * -1 + 'px');
            });
        }
    });

    $rightControl.on('click', function(){
        var width = $slider.width();
        position = position + 1 < numItems ? position + 1 : 0;
        if(position != 0){
            $slider.find('.slide').eq(position).css('margin-left',  width * -1 + 'px');
        }
        else{
            $slider.find('.slide').css('margin-left', 0);
        }
    });

    $(window).resize(function(){
        $slides.width($(window).width()).height($(window).height);
    });
})

Answer 1

您能否尝试使用此修改后的代码：

请根据您的要求修改var autoSlideTime。

$(document).ready(function(){
    var $slider = $('.slider');
    var $slideBox = $slider.find('.slide-box');
    var $leftControl = $slider.find('.slide-left');
    var $rightControl = $slider.find('.slide-right');
    var $slides = $slider.find('.slide');
    var numItems = $slider.find('.slide').length;
    var position = 0;
    var autoSlideTime = 5000; //auto slide after 5 seconds

    /*on click functionality */
    var windowWidth = $(window).width();
    $slides.width(windowWidth);
    $leftControl.on('click', function(){
        clearInterval(slideInterval);
        var width = $slider.width();
        position = position - 1 >= 0 ? position - 1 : numItems - 1;
        if(position != numItems-1){
            $slider.find('.slide').eq(position + 1).css('margin-left', 0);
        }
        else{
            $slider.find('.slide:gt(0)').each(function(index){
                $(this).css('margin-left', width * -1 + 'px');
            });
        }
        AutoSlide();
    });

    $rightControl.on('click', function(){
        clearInterval(slideInterval);
        var width = $slider.width();
        position = position + 1 < numItems ? position + 1 : 0;
        if(position != 0){
            $slider.find('.slide').eq(position).css('margin-left',  width * -1 + 'px');
        }
        else{
            $slider.find('.slide').css('margin-left', 0);
        }
        AutoSlide();
    });

    $(window).resize(function(){
        $slides.width($(window).width()).height($(window).height);
    });

    //functionality for autoslide
    var slideInterval = null;
    function AutoSlide(){
        slideInterval = setInterval(function(){
            $rightControl.click();
        },autoSlideTime);
    }
    AutoSlide();

})

在下面的代码段中添加自动幻灯片功能

1 个答案: