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 に答える