2013-01-02 251 views
0

我有下面的代碼,我添加了循環jQuery組件,並且似乎無法循環。不知道我是否需要一個不同的腳本或代碼庫。循環通過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> 
+0

您希望在頁面加載時自動循環? –

回答

0

cycle plugin's page examples,我看你需要通過他們的孩子將被循環的元素的ID。在你的情況下,這將是ul ID,以便li兒童將循環。因此,嘗試:

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

,而不是$('#tabs li')

而且我會檢查JavaScript控制檯(按Ctrl + Shift + J在Ffox /鉻)對於可能從執行可以阻礙你的代碼的其餘部分的任何JavaScript錯誤。