我的自定义javascript旋转木马无法正常工作

My custom javascript Carousel is not working properly

本文关键字：常工作 工作 自定义 javascript 旋转木马 我的      更新时间：2023-09-26

我试图用Javascript实现一个旋转木马，但导航按钮有问题。

Prev和Next运行良好，但我调用的导航点不正常。

此外，我想按照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

在这个循环中：

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。你很幸运能在全球范围内定义它。

小提琴

一种解决方案是将每个项目的位置存储在数据位置属性中。当你使用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);
            });
相关文章：