Question

我试图让 Featured Content Slider 在突出显示时自动滚动其列表项。但是，当我尝试jquery代码时，我做了它甚至不滚动内容。如果有人可以帮助我解决这个问题，那会更好。

我试过了，

JS：

var container = $("#featured ul");
scrollTo = $('ul li.ui-tabs-active.ui-state-active');        
container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

及其实际代码;

<div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-6"><a href="#fragment-6"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-7"><a href="#fragment-7"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-8"><a href="#fragment-8"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="images/image1.jpg" alt="" />
        <div class="info" >
            <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image2.jpg" alt="" />
        <div class="info" >
            <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
            <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image3.jpg" alt="" />
        <div class="info" >
            <h2><a href="#" >35 Amazing Logo Designs</a></h2>
            <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
</div>

我对此毫不客气，但我尝试搭建一个jsfiddle - ＆gt; http://jsfiddle.net/pS6Bh/

Answer 1

它停止自动滚动的原因是，Jquery Tabs死记硬背功能在最新版本中被折旧。为了使其有效，您应该使用Christopher McCulloh的jQuery UI Tabs

包含该脚本

，这是 Working Demo

您还应该包含以下CSS

#featured li.ui-tabs-active{   
    background:url('images/selected-item.gif') top left no-repeat;    
}  
#featured ul.ui-tabs-nav li.ui-tabs-active a{   
    background:#ccc;   
}

精选内容Slider ScrollTo

1 个答案: