Question

我尝试使用Javascript实现轮播，但我的导航按钮出现问题。我想在显示各自的图像时为这些项添加一个活动的类（.carousel-dots-nav-item）。

我在点击导航菜单时想出了怎么做，但我在上一页和下一页按钮上遇到了问题。

您可以在jsfiddle

查看完整代码

这是javascript文件：

$(document).ready(function() {


    var carouselItems = [
        { src: "http://placehold.it/600x300/cccccc/000000", title: "Sample 01" },
        { src: "http://placehold.it/600x300/f45a45/000000", title: "Sample 02" },
        { src: "http://placehold.it/600x300/b78d65/000000", title: "Sample 03" },
        { src: "http://placehold.it/600x300/666aa0/000000", title: "Sample 04" },
        { src: "http://placehold.it/600x300/cccddd/000000", title: "Sample 05" }
    ];

    Carousel = function() {
        // keep track of the current position
        var position = 0;

        // build carousel based on items in the carouselItems array
        $(carouselItems).each(function(index, value){
            var li = $('<li/>');
            li.addClass('carousel-item');
            li.css('width', 100 / carouselItems.length + '%');
            li.appendTo($('#carousel'));

            var img = $('<img/>');
            img.attr('src', value.src);
            img.attr('title', value.title);
            img.appendTo(li);

            var liDot = $('<li/>');
            liDot.data('position', index); // Store the position of the respectives images & dots
            liDot.data('title',value.title); //Store the image titles on each dot instance
            liDot.addClass('carousel-dots-nav-item').html('o');
            liDot.appendTo($('#carousel-dots-nav'));
        });

        //increase width of the carousel
        $('#carousel').css('width', carouselItems.length * 100 + '%');

        //add events to dots
        for (i = 0; i < $('.carousel-dots-nav-item').length; i++) {
            var dot = $('.carousel-dots-nav-item')[i];

            // show the title of the image when hovering the associated dot
            $(dot).hover(function(e){
                //$('#title').text(carouselItems[i].title);
                $('#title').text($(this).data('title'));

            }, function(e){
                $('#title').text('');
            });

            // move to the appropriate slide when a dot is clicked
            $(dot).click(function(e){
                //position = i; //i -> $('.carousel-dots-nav-item').length
                var position= $(this).data('position');  //Position based on the index
                $('.active').removeClass('active'); //Reset classes .active from all dots
                $(this).addClass('active'); //Add class .active to clicked dot
                $('#carousel').animate({
                    left: -position * 100 + '%'
                }, 500);
            });
        }


        // add click event to next button
        $("#next").click(function(e){
            e.preventDefault();

            if (position == carouselItems.length - 1) return;
            $('.active').removeClass('active');
            position++;
            //$('.carousel-dots-nav-item').data('position');

            $('#carousel').animate({
                left: -position * 100 + '%'
            }, 500);
        });

        // add click event to previous button
        $("#previous").click(function(e){
            e.preventDefault();

            if (position == 0) return;
            $('.active').removeClass('active');

            position--;
            $('#carousel').animate({
                left: -position * 100 + '%'
            }, 500);
        });
    };

    var carousel = new Carousel();
});

Answer 1

您好请查看jsfiddle

上的更新代码

$('#carousel-dots-nav li').eq(position).addClass('active');

单击下一个和上一个时，如何在导航菜单中添加和删除类？

1 个答案: