列表实现轮番

看到有些网站上的li项目标签有轮番的效果,是不是很爽,
好吧,今天分享一段实现该功能的代码。
首先必须载入jQuery库。
下面是一段ul,li列表,你的列表诸如以下形式的

<code><div id="newstopic">
    <ul id="newstopics">
        <li class="newssubjects"> <a href="thread-120523-1-1.html" title="飓风桑迪来袭 苹果第五大道旗舰店作防御准备">飓风桑迪来袭 苹果第五大道旗舰店作防御准备</a></li>
        <li class="newssubjects"> <a href="thread-120522-1-1.html" title="[全文]Tim Cook致员工信">[全文]Tim Cook致员工信</a></li>
        <li class="newssubjects"> <a href="thread-120521-1-1.html" title="苹果人事变动赢家和输家:多名高管权力扩大">苹果人事变动赢家和输家:多名高管权力扩大</a></li>
        <li class="newssubjects"> <a href="thread-120519-1-1.html" title="iPhone 5获得无线电业务许可">iPhone 5获得无线电业务许可</a></li>
        <li class="newssubjects"> <a href="thread-120518-1-1.html" title="苹果面临的问题 长方形设计和用户升级疲劳">苹果面临的问题 长方形设计和用户升级疲劳</a></li>
        <li class="newssubjects"> <a href="thread-120517-1-1.html" title="苹果高管地震或影响股价 股市反应因飓风延迟">苹果高管地震或影响股价 股市反应因飓风延迟</a></li>
        <li class="newssubjects"> <a href="thread-120516-1-1.html" title="iPad和iPhone遭EMS拒寄:内置锂电池易爆炸">iPad和iPhone遭EMS拒寄:内置锂电池易爆炸</a></li>
        <li class="newssubjects"> <a href="thread-120515-1-1.html" title="福斯特离去人事动荡后 苹果走向彻底库克化">福斯特离去人事动荡后 苹果走向彻底库克化</a></li>
        <li class="newssubjects"> <a href="thread-120514-1-1.html" title="苹果高管Forstall离职不是因为道歉信 更多是树敌太多遭排挤">苹果高管Forstall离职不是因为道歉信 更多是树敌太</a></li>
        <li class="newssubjects"> <a href="thread-120513-1-1.html" title="四代iPad频率为1.4GHz RAM为1GB 性能是三代的两倍">四代iPad频率为1.4GHz RAM为1GB 性能是三代的两倍</a></li>
        <li style="opacity: 1;"> <a href="thread-120550-1-1.html" title="苹果新版iTunes软件推迟至11月底前发布">苹果新版iTunes软件推迟至11月底前发布</a></li>
        <li style="opacity: 1;"> <a href="thread-120549-1-1.html" title="iPad mini亮相中国官网:行货售价曝光">iPad mini亮相中国官网:行货售价曝光</a></li>
        <li style="opacity: 1;"> <a href="thread-120527-1-1.html" title="苹果高层震荡:iOS 与零售店主管将离任">苹果高层震荡:iOS 与零售店主管将离任</a></li>
        <li style="opacity: 1;"> <a href="thread-120526-1-1.html" title="苹果高层大震动,做地图的男人走了">苹果高层大震动,做地图的男人走了</a></li>
        <li style="opacity: 1;"> <a href="thread-120524-1-1.html" title="受益于iPad,苹果成为全球最大的计算机制造商">受益于iPad,苹果成为全球最大的计算机制造商</a></li>
    </ul>
</div>
</code>

将以就是JS代码了

<code><script>
jQuery(document).ready(function(){
    var first = 0;var speed = 700;var pause = 3500;
        function removeFirst(){
            first = jQuery('ul#newstopics li:first').html();
            jQuery('ul#newstopics li:first')
            .animate({opacity: 0}, speed)
            .fadeOut('slow', function() {jQuery(this).remove();});
            addLast(first);
        }
        function addLast(first){
            last = '<li style="display:none">'+first+'</li>';
            jQuery('ul#newstopics').append(last)
            jQuery('ul#newstopics li:last')
            .animate({opacity: 1}, speed)
            .fadeIn('slow')
        }
    interval = setInterval(removeFirst, pause);
});
</script></code>

0 thoughts on “列表实现轮番
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。