自定义滑块 - 寻找附加功能的指导

Question

Javascript的新手，并从前一个帖子获得了一些帮助，但想扩展我已经创建的内容。可以在 www.cpointweb.com/dtv/

中查看实时网站

我想突出显示右侧的蓝色框，表示它所在的活动滑块。我意识到我可以用.addClass（）实现这个目的但是我无法解决这个问题，因为每个滑块都有不同的id ...

由于存在不同的ID，循环如何知道更改类的ID？我觉得如果我在鼠标悬停中应用它，它只会在我用鼠标悬停在它上面时才能工作？或者我只是在考虑这个错误？

我认为这比我制作的要简单得多，但我不知所措，以为我可以寻求帮助！

            var dataArray = [[1,"Dossani Turnage & Van Hoose Thanks You!", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "img/slider-one.jpg"], [2, "With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "img/slider-two.jpg"], [3,"With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "img/slider-three.jpg"],[4,"With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "img/slider-four.jpg"],[5,"With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "img/slider-five.jpg"],[6,"With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "img/slider-6.jpg"]];

            var loopTime = 5000;
            var count = 1;

            $(function(){
                SetTimeout(Loop, loopTime);
            });


            function Loop(){
                changeSlider(dataArray[count][0], dataArray[count][1], dataArray[count][2], dataArray[count][3]);
                count++;
                if(count >= dataArray.length) count = 0;
                setTimeout(Loop, loopTime);


            }

            function changeSlider(id, header, html, img) {
                var rightHtml = '<h2>' + header + '</h2><p>' + html + '</p>';
                var slider = '<img src="' + img + '" />';

                $('.right').fadeOut('fast', function(){
                    $(this).html(rightHtml).fadeIn('slow');

                });
                $('.slider-image').fadeOut('fast', function(){
                    $(this).html(slider).fadeIn('slow');

                });

            }

            $('#1').mouseover(function() {
                var id = parseInt($(this).data("id"));
                changeSlider(dataArray[id][0], dataArray[id][1], dataArray[id][2], dataArray[id][3]);
            });


            $('#2').mouseover(function() {
                var id = parseInt($(this).data("id"));
                changeSlider(dataArray[id][0], dataArray[id][1], dataArray[id][2], dataArray[id][3]);
            });

            $('#3').mouseover(function() {
                var id = parseInt($(this).data("id"));
                changeSlider(dataArray[id][0], dataArray[id][1], dataArray[id][2], dataArray[id][3]);

            });

            $('#4').mouseover(function() {
                var id = parseInt($(this).data("id"));
                changeSlider(dataArray[id][0], dataArray[id][1], dataArray[id][2], dataArray[id][3]);

            });

            $('#5').mouseover(function() {
                var id = parseInt($(this).data("id"));
                changeSlider(dataArray[id][0], dataArray[id][1], dataArray[id][2], dataArray[id][3]);

            });

            $('#6').mouseover(function() {
                var id = parseInt($(this).data("id"));
                changeSlider(dataArray[id][0], dataArray[id][1], dataArray[id][2], dataArray[id][3]);

            });

Answer 1

我会在你的changeSlider函数中添加这个代码，如下所示：

function changeSlider(id, header, html, img) {
    var rightHtml = '<h2>' + header + '</h2><p>' + html + '</p>';
    var slider = '<img src="' + img + '" />';

    //THIS IS THE NEW CODE
    $(".box").find("li").removeClass("yourclassname");
    $(".box").find("#" + id).addClass("yourclassname");


    $('.right').fadeOut('fast', function() {
        $(this).html(rightHtml).fadeIn('slow');

    });
    $('.slider-image').fadeOut('fast', function() {
        $(this).html(slider).fadeIn('slow');

    });

}

Answer 2

在这种情况下，您可能需要稍微重做一下代码。像这样：

var loopTime = 1000;
var count = 0;
var timer = 0;

$(function() {
    Loop();
});

function stopTimer() {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }
}

function startTimer() {
    timer = setTimeout(Loop, loopTime);
}

function Loop() {
    changeSlider(dataArray[count][0], dataArray[count][1], dataArray[count][2], dataArray[count][3]);
    count++;
    if (count >= dataArray.length)
        count = 0;
    startTimer();
}

function changeSlider(id, header, html, img) {
    var rightHtml = '<h2>' + header + '</h2><p>' + html + '</p>';
    var slider = '<img src="' + img + '" />';

    $(".box").find("li").removeClass("yourclassname");
    $(".box").find("#" + id).addClass("yourclassname");

    $('.right').fadeOut('fast', function() {
        $(this).html(rightHtml).fadeIn('slow');
    });
    $('.slider-image').fadeOut('fast', function() {
        $(this).html(slider).fadeIn('slow');
    });
}

for (var i = 1; i <= 6; i++) {
    $('#' + i)
            .mouseenter(function() {
                var id = parseInt($(this).data("id"));
                count = id + 1;
                changeSlider(dataArray[id][0], dataArray[id][1], dataArray[id][2], dataArray[id][3]);
                stopTimer();
            })
            .mouseleave(function() {
                startTimer();
            });
}