0

以下のコードがあります。サイクル jQuery コンポーネントを追加しましたが、循環できないようです。一般的に、別のスクリプトまたはコードベースが必要かどうかはわかりません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$("#tabs li").click(function() {
    //  First remove class "active" from currently active tab
    $("#tabs li").removeClass('active');

    //  Now add class "active" to the selected/clicked tab
    $(this).addClass("active");

    //  Hide all tab content
    $(".tab_content").hide();

    //  Here we get the href value of the selected tab
    var selected_tab = $(this).find("a").attr("href");

    //  Show the selected tab content
    $(selected_tab).fadeIn();

    //  At the end, we add return false so that the click on the link is not executed
    return false;
});
});
/* ]]> */
</script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$(' #tabs li').cycle({
    fx:     'fade',
    speed:  'fast',
    timeout: 300,
    //pager:  'a',
    //      slideExpr: 'img'
    });
});
</script>

これがタブ構造です。タブは現在完全に機能しており、フォーマットに 10 秒の自動サイクルを追加したいだけです。

 <div id="tabs_content_container">
    <!--- Start Tab One ---> 
            <div id="tab1" class="tab_content" style="display: block;"> 
                <div id="tab1Content" style="font-size: 1em; font-family:" trebuchet="" ms",="" arial,="" helvetica,="" sans-serif;"="">
                <img src="chasers-b.jpg" style="float:left; margin-right:15px;" width="100">
                    <h3>Chasers Revealed!</h3>
                    <p>chasers revealed!<br><br>
                   <a href="#">Click to read more...</a>
                    <br clear="all">
                </br...<></p></div>
             </div>

            <!--- Start Tab Two --->
            <div style="display: none;" id="tab2" class="tab_content">        
                <div id="tab2Content" style="font-size: 1em; font-family:" trebuchet="" ms",="" arial,="" helvetica,="" sans-serif;"="">
               <img src="hot2013-01-01at34901AM.png" style="float:left; margin-right:10px;" width="100"><h3>First Look at Valentine's 2013</h3>
                    <h5>Valentine's Day 2013.<br><br>  </h5>
                    <a href="#">Click to read more...</a>
                    <br clear="all">
                </div>
            </div>

            <!--- Start Tab Three --->
            <div style="display: none;" id="tab3" class="tab_content"> 
                <div id="tab3Content" style="font-size: 1em; font-family:" trebuchet="" ms",="" arial,="" helvetica,="" sans-serif;"="">
                <img src="Sale.jpg" style="float:left; margin-right:15px;" width="100">
                 <h3>What's on Sale?</h3>
                    <h5><div align="center">  </div><br>Content on sale...</h5>
                    <a href="#">Click to read more...</a>
                    <br clear="all">
                </div>
            </div>




</div>
<div id="tabs_container">
    <ul id="tabs"> <li class="active"><a href="#tab1"><img src="chasers-b.jpg" alt="Chasers Revealed!" style="float:left; margin-right:10px;" height="100" width="100"></a></li>
<li><a href="#tab2"> <img src="Screenshot2013-01-01at34901AM.png" alt="First Look at Valentine's 2013" style="float:left; margin-right:15px;" height="100" width="100"></a></li>
        <li class=""><a href="#tab3"> <img src="Sale.jpg" alt="What's on Sale?" style="float:left; margin-right:15px;" height="100" width="100"></a></li>

    </ul>
</div>
4

1 に答える 1

0

サイクル プラグインのページの例から、子が循環する要素の ID を渡す必要があることがわかります。あなたの場合、それはulIDになるので、li子供たちは循環します。だから試してみてください：

$('#tabs').cycle({
   fx:     'fade',
   speed:  'fast',
   timeout: 300
});

それ以外の$('#tabs li')

また、JavaScript コンソール (Ffox/Chrome では Ctrl+Shift+j) をチェックして、残りのコードの実行を妨げている可能性のある JavaScript エラーがないか確認します。

于 2013-01-03T18:16:45.377 に答える