fiddle

Question

我正在尝试使用Javascript实现轮播，但我的导航按钮出现问题。

上一个和下一个工作正常，但我正在呼叫的导航点不是。

另外，我想根据jsfiddle上的HTML显示跨度上的图像标题。您可以在以下评论中看到我对javascript文件的尝试。

// show the title of the image when hovering the associated dot.

这是javascript。其他文件可以显示在jsfiddle

$(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.appendTo(li);

            var liDot = $('<li/>');
            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);
            }, function(e){
                $('#title').text('');
            });

            // move to the appropriate slide when a dot is clicked
            $(dot).click(function(e){
                position = i;
                $('#carousel').animate({
                    left: -position * 100 + '%'
                }, 500);
            });
        }

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

            if (position == carouselItems.length - 1) return;

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

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

            if (position == 0) return;

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

    var carousel = new Carousel();
});

jsfiddle

Answer 1

在这个循环中：

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

    // move to the appropriate slide when a dot is clicked
    $(dot).click(function(e){
        position = i;
        $('#carousel').animate({
            left: -position * 100 + '%'
        }, 500);
    });
}

您正在使用i来定义排名。但点击功能中的所有内容都不会在循环内执行，而是在您点击一个点元素时执行。因此i等于$('.carousel-dots-nav-item').length。你很幸运能在全球范围内定义它。

fiddle

解决方案是将每个项目的位置存储在数据位置属性中。当你使用jquery时，我也使用它：

//
            var liDot = $('<li/>');
            liDot.data("position", index);
            liDot.addClass('carousel-dots-nav-item').html('o');
            liDot.appendTo($('#carousel-dots-nav'));

//
            $(dot).click(function(e){
                var position= $(this).data('position');
                $('#carousel').animate({
                    left: -1*position * 100 + '%'
                }, 500);
            });

我的自定义javascript轮播无法正常工作

1 个答案:

fiddle