自定义滑块 - 如何自动浏览每个滑块

Question

我对Javascript很新，最近构建了以下滑块：http://cpointweb.com/dtv/（如果将鼠标悬停在蓝框上，左侧内容会发生变化）

以下是代码：

            function changeSlider(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() {
            changeSlider("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</p><p>Testing Another Line","img/slider-one.jpg");
            });

            $('#2').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-two.jpg");;
            });

            $('#3').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-three.jpg");

            });

            $('#4').mouseover(function() {

            changeSlider("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</p><p>Testing Another Line","img/slider-four.jpg");

            });

            $('#5').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-five.jpg");

            });

            $('#6').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-6.jpg");
            });

是否可以使用我当前的代码旋转其中的每一个？我知道WindowTimers.setInterval（）但我不确定如何用我当前的代码执行它。

非常感谢任何帮助。

谢谢！

Answer 1

将标题，html和img字符串放在数组中。

var dataArray = [["header", "html", "img"], ["header2", "html2", "img2"]];

设置时间变量和计数器，

var loopTime = 2000;
var count = 0;

然后使用setTimeout调用一个递增计数器的函数，然后调用你的changeSlider函数。

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

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

function changeSlider(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');
    });
}

更新

如果您要在蓝色框上放置data-id属性，则可以在执行鼠标悬停调用时使用它来索引数组

<img id="1" data-id="0"/>

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

更新：

我已经让JSFiddle在这里显示了这个循环 - ＆gt; JSFiddle

Answer 2

喜欢这个吗？

                var dataArray = ["header", "html", "img"];
                var loopTime = 2000;
                var count = 0;

            function changeSlider(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');
                });

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

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

            $('#1').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-one.jpg");

            });

            $('#2').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-two.jpg");;
            });

            $('#3').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-three.jpg");

            });

            $('#4').mouseover(function() {

            changeSlider("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</p><p>Testing Another Line","img/slider-four.jpg");

            });

            $('#5').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-five.jpg");

            });

            $('#6').mouseover(function() {
            changeSlider("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</p><p>Testing Another Line","img/slider-6.jpg");
            });