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

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

})

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

add auto slide functionality in below snippet

jquery

responsive-slides