两个内容的轮换简单实现 (各个<li></li>标记中的内容为要轮换的内容)
html内容
<div class="zhongdian"><ul><li><img src='http://www.cnblogs.com/UploadFiles/Arcitle/201253014551491347.jpg'><h3><a href='ReadNews.asp?rid=661&t=self'>重庆钢铁集团</a></h3>重钢重庆钢铁(集团)有限责任公司(下称“重钢集团”...</li><li><img src='UploadFiles/Arcitle/20125301547458531.jpg'><h3><a href='ReadNews.asp?rid=660&t=self'>长安汽车</a></h3>长安汽车源自于1862年,是中国近代工业的先驱,隶...</li></ul></div>
js文件
var intX; jQuery(document).ready(function(){ //jQuery信息轮换效果 $(".zhongdian ul li").eq(1).hide(); intX=window.setInterval(lunhuang,5000); $(".zhongdian ul li").mouseover(function(){ window.clearInterval(intX); }); $(".zhongdian ul li").mouseout(function(){ intX=window.setInterval(lunhuang,5000); }); }); function lunhuang() { $(".zhongdian ul li:visible").slideUp("slow").siblings().slideDown("slow"); }
三个或多个的呢?
JS文件
var intX; jQuery(document).ready(function(){ //jQuery信息轮换效果 $(".zhongdian ul li").eq(0).siblings().hide(); intX=window.setInterval(lunhuang,5000); $(".zhongdian ul li").mouseover(function(){ window.clearInterval(intX); }); $(".zhongdian ul li").mouseout(function(){ intX=window.setInterval(lunhuang,5000); }); }); function lunhuang() { var n; $(".zhongdian ul li:visible").slideUp("slow"); n = $(".zhongdian ul li").index($(".zhongdian ul li:visible")); if (n< 3 -1 ) //轮换3次,轮换的次数 { $(".zhongdian ul li").eq( n+1 ).slideDown("slow"); } else { $(".zhongdian ul li").eq( 0 ).slideDown("slow"); } }