自定义滑块-如何自动遍历每个滑块

将头、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');
    });
}

更新；

如果你要在你的蓝框上放一个数据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，展示了这个循环在这里的工作情况->JSFiddle

这样？

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