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 に答える