Question

我有以下代码，我添加了循环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>

Answer 1

从cycle plugin's page examples，我看到你需要传递其子项将循环的元素的id。在您的情况下，ul ID为li个，以便$('#tabs').cycle({ fx: 'fade', speed: 'fast', timeout: 300 });个孩子会循环。所以试试：

$('#tabs li')

而不是{{1}}

另外，我会检查javascript控制台（在Ffox / Chrome中为Ctrl + Shift + j），以查找可能阻碍其余代码执行的任何javascript错误。

循环浏览Jquery选项卡

1 个答案: