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 回答