0

我在互联网上找到了这个用于响应式图像滑块的片段，一切正常，但我需要添加自动滑动功能，我是 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);
    });
})
4

1 回答 1

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

})
于 2015-09-04T07:37:24.363 回答