jquery轮换显示图文内容

两个内容的轮换简单实现  （各个<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");
    }    
    
}

 

 

转载于:https://www.cnblogs.com/henshui/archive/2012/08/14/2637807.html