主页 / 问题 / 793014
Accepted
Студеникин Максим
Asked:2020-03-03 21:39:10 +0000 UTC2020-03-03 21:39:10 +0000 UTC

滑块上的重复分页（jQuery）

  • 772

我不知道如何以不重复的方式为滑块生成分页。对于每个滑块，分页项与其元素的数量相对应，并从特定滑块中的活动元素开始突出显示。

 //slider

//color active pagination slide

var colorAtiveItem = function (index) {

    $('.slider__teg')
        .find('.pagination__item')
        .eq(index)
        .addClass('pagination__item--activ')
        .siblings()
        .removeClass('pagination__item--activ');
}

//generation number of slide

var generateItems = function (index) {

    $('.slider__item').each(function (index) {

        var paginationItem = $('<li>', {
            attr: {
                class: 'pagination__item'
            },
            html: '<a class="pagination__link">' + (index + 1) + '</a>'
        });

        $('.pagination__list').append(paginationItem);
    })
};

generateItems();

//listing slid

var moveSlide = function (cont, slideNum) {

    var items = cont.find('.slider__item'),
        activeSlide = items.filter('.active__slide'),
        reqItem = items.eq(slideNum),
        reqIndex = reqItem.index(),
        list = cont.find('.slider__list'),
        dur = 500;

    if (reqItem.length) {
        list.animate({
            'left': -reqIndex * 100 + '%'
        }, dur, () => {
            activeSlide.removeClass('active__slide');
            reqItem.addClass('active__slide');
            colorAtiveItem(slideNum);
        });
    }

};

//click ruls btn

$('.slider__controls').on('click', function (event) {
    event.preventDefault();

    var $this = $(event.target),
        cont = $this.closest('.slider__teg'),
        items = $('.slider__item', cont),
        activeItem = items.filter('.active__slide');
    var existedItem,
        edgeItem,
        reqItem;

    if ($this.hasClass('controls__btn__next')) {
        existedItem = activeItem.next();
        edgeItem = items.first();
    }

    if ($this.hasClass('controls__btn__prev')) {
        existedItem = activeItem.prev();
        edgeItem = items.last();
    }

    reqItem = existedItem.length ? existedItem.index() : edgeItem.index();

    moveSlide(cont, reqItem);

});

//click on pugination

$('body').on('click', '.pagination__item', function () {

    var $this = $(this),
        container = $this.closest('.slider__teg'),
        index = $this.index();

    moveSlide(container, index);
    activeSlide(index);
});

我的代码是https://jsfiddle.net/3oonj7ex/3/

javascript

1 个回答

  1. Best Answer

    我只是有点笨：D

    这是您需要的代码

     //slider

var colorAtiveItem = function (container, index) {

        $('.pagination__item',container)
        .eq(index)
        .addClass('pagination__item--activ')
        .siblings()
        .removeClass('pagination__item--activ');
}

//generation number of slide

var generateItems = function () {

    var sliders = $('.slider__teg');

    for (var indexSlider = 0; indexSlider < sliders.length; indexSlider++) {
        currentSliders = sliders[indexSlider];

        $('.slider__item', currentSliders).each(function (indexNumber) {

            var paginationItem = $('<li>', {
                attr: {
                    class: 'pagination__item'
                },
                html: '<a class="pagination__link">' + (indexNumber + 1) + '</a>'
            });

            $('.pagination__list', currentSliders).append(paginationItem);
        })
    }
};

generateItems();

//searh number slid and activ slid 

var moveSlide = function (cont, slideNum) {

    var items = cont.find('.slider__item'),
        activeSlide = items.filter('.active__slide'),
        reqItem = items.eq(slideNum),
        reqIndex = reqItem.index(),
        list = cont.find('.slider__list'),
        dur = 500;

    if (reqItem.length) {
        list.animate({
            'left': -reqIndex * 100 + '%'
        }, dur, function () {
            activeSlide.removeClass('active__slide');
            reqItem.addClass('active__slide');
            colorAtiveItem(slideNum);
        });
    }

};

//click ruls btn

$('.slider__controls').on('click', function (event) {
    event.preventDefault();

    var $this = $(event.target),
        cont = $this.closest('.slider__teg'),
        items = $('.slider__item', cont),
        activeItem = items.filter('.active__slide');
    var existedItem,
        edgeItem,
        reqItem;

    if ($this.hasClass('controls__btn__next')) {
        existedItem = activeItem.next();
        edgeItem = items.first();
    }

    if ($this.hasClass('controls__btn__prev')) {
        existedItem = activeItem.prev();
        edgeItem = items.last();
    }

    reqItem = existedItem.length ? existedItem.index() : edgeItem.index();

    moveSlide(cont, reqItem);

});

//click on pugination

$('body').on('click', '.pagination__item', function () {

    var $this = $(this),
        container = $this.closest('.slider__teg'),
        index = $this.index();

    moveSlide(container, index);
    colorAtiveItem(container, index);
});
    • 0

相关问题