自定义滑块-寻找额外功能的指导

Custom Slider - Looking For Guidance For Additional Feature

本文关键字：功能 寻找 自定义      更新时间：2023-09-26

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]);
            });

我会在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');
    });
}

在这种情况下，您可能需要重做一点代码。类似这样的东西：

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();
            });
}
相关文章：