2

在 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 秒在每种情况之间切换的任何想法？最欣赏！

4

1 回答 1

1

首先取这里定义的那个大匿名函数

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

并命名它

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

然后你把你的按钮连接到它

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

现在你制作了一个在计时器上旋转的功能

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

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

你将不得不修补它，但这是基本思想

于 2012-07-19T14:32:47.983 回答