javascript - 自定义 slider - 寻找附加功能的指导

Question

Javascript 的新手，在这里从以前的线程获得了一些帮助，但想扩展我已经创建的内容。可以在 www.cpointweb.com/dtv/ 看到实时站点

我想突出显示右侧的蓝色框，无论它位于哪个事件 slider 上。我意识到我可以用 .addClass() 实现这一点，但是我无法理解它是如何工作的，每个 slider 都有不同的 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');

    });

}