jquery - 尝试使用 jQuery 在开关上设置计时器

Question

在 Google(以及 StackOverflow 上的大量结果)的帮助下，我和我的同事成功地拼凑了一个“旋转器”。右侧蓝色按钮的主图位于www.buisnessinlake.com供引用。

我们让它正常运行，但现在我们试图让它按设定的时间间隔自动在不同状态之间切换。我们现在使用开关来执行此操作，但想添加汽车零件。我找到了有关如何添加计时器的其他脚本示例，但没有一个与这样的开关配合使用的脚本示例，所以我不确定从这里开始哪里。

这就是我们所处的位置:

    $(document).ready(function () {
    var theid = $("div.open").attr("id");

    //ACCORDION BUTTON ACTION   
    $('div.accordionButton').click(function () {
        // console.warn(theid);
        var theitem = $("#" + theid);
        var doanimation = true;
        if ($(this).attr("id") == theid) {
            doanimation = false;
        };

        theid = $(this).attr("id");

        if (doanimation) {
            switch (theid) {
                case "rotator_1":
                    $('div.arrow').animate({
                        left: '-24',
                        top: '-3'
                    }, 300, function () {
                        // Animation complete.
                    });
                    $('#picsunder').css("background-image", "url(../../content/images/rotator_1.png)");
                    $('#pics').fadeTo('slow', 0, function () {
                        //animationcomplete
                        $(this).css("background-image", "url(../../content/images/rotator_1.png)");
                        $(this).fadeTo('fast', 1);
                    });
                    break;

                case "rotator_2":
                    $('div.arrow').animate({
                        left: '-24',
                        top: '55'
                    }, 300, function () {
                        // Animation complete.
                    });
                    $('#picsunder').css("background-image", "url(../content/images/rotator_2.png)");
                    $('#pics').fadeTo('slow', 0, function () {
                        //animationcomplete
                        $(this).css("background-image", "url(../content/images/rotator_2.png)");
                        $(this).fadeTo('fast', 1);
                    });
                    break;

                case "rotator_3":                      
                    $('div.arrow').animate({
                        left: '-24',
                        top: '113'
                    }, 300, function () {
                        // Animation complete.
                    });
                    $('#picsunder').css("background-image", "url(../content/images/rotator_4.png)");
                    $('#pics').fadeTo('slow', 0, function () {
                        //animationcomplete
                        $(this).css("background-image", "url(../content/images/rotator_4.png)");
                        $(this).fadeTo('fast', 1);
                    });
                    break;

                case "rotator_4":
                    $('div.arrow').animate({
                        left: '-24',
                        top: '171'
                    }, 300, function () {
                        // Animation complete.
                    });
                    $('#picsunder').css("background-image", "url(../content/images/rotator_3.png)");
                    $('#pics').fadeTo('slow', 0, function () {
                        //animationcomplete
                        $(this).css("background-image", "url(../content/images/rotator_3.png)");
                        $(this).fadeTo('fast', 1);
                    });
                    break;

            }
        }
        //console.warn(theid);
        $("div.accordionButtonSelected").removeClass("accordionButtonSelected").addClass("accordionButton");
        $("div.accordionContentSelected").removeClass("accordionContentSelected").addClass("accordionContent");
        $(this).next().removeClass("accordionContent").addClass("accordionContentSelected");
        $(this).removeClass("accordionButton").addClass("accordionButtonSelected");
        $('div.accordionContent').slideUp('normal');
        $(this).next().slideDown('normal');
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();

    //Opens DIV on load that has the ID of "open"
    $("div.open").trigger('click');

});

这是所要求的 HTML:

 <div id="photo_rotator">
 <div id="pics"></div>
 <div id="picsunder"></div>
 <div id="wrapper">
    <div class="arrow"></div>
    <div class="accordionButton open" id="rotator_1">Why Lake</div>
    <div class="accordionContent">@Html.ActionLink("Our prime location and business-friendly approach make Lake County the perfect location to live, work and play.", "Index", "WhyLake", Nothing, New With {.class = "rotator"})</div>
    <div class="accordionButton shadow" id="rotator_2">Opportunity Centers</div>
    <div class="accordionContent">@Html.ActionLink("Lake County’s three Business Opportunity Centers offer a myriad of programs and services to support your business.", "BusinessOpportunityCenters", "BusinessSupport", Nothing, New With {.class = "rotator"})</div>
    <div class="accordionButton shadow" id="rotator_3">Economic Coordinators</div>
    <div class="accordionContent">@Html.ActionLink("Lake County’s economic development coordinators are here to assist with the information or support your business needs.", "EconomicDevelopmentCoordinators", "BusinessSupport",  Nothing, New With {.class = "rotator"})</div>
    <div class="accordionButton shadow" id="rotator_4">Site Selection</div>
    <div class="accordionContent"><a class="rotator" href="http://propertyfinder.lakecountyfl.gov">With an abundance of available land and vacant building space, we can pinpoint the perfect site to locate your business.</a></div>
</div>

关于如何添加一个简单的计时器以每 10 秒在每种情况之间切换有什么想法吗？非常感谢!

Answer 1

首先采用此处定义的大匿名函数

$('div.accordionButton').click(function () {

并命名它

function doRotateImage(event)
{
   //stuff you already have
}

然后将按钮连接到它

$('div.accordionButton').click(doRotateImage);

现在您创建了一个在计时器上旋转的函数

function autoRotate()
{
   doRotateImage();
   setTimeout( autoRotate, 10 * 1000);  
}

现在在某处调用 autoRotate() 一次来启动它。

你必须修改它，但这是基本思想