看到有些网站上的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>
<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>
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>