zoukankan      html  css  js  c++  java
  • 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");
        }    
        
    }
  • 相关阅读:
    用C#实现在线升级
    wordwrap,wordbreak,whitespace,textoverflow的区别和用法[转]
    Sql Server 存储过程分页大全(2005,2000)
    C#中生成中文繁体web页面
    如何在c#里执行sql server DTS包
    asp.net采集函数(采集、分析、替换、入库)
    css定义一个导航栏
    mssql与access的sql语法差异
    [转]sql server数据库定时自动备份
    HttpHandler与图片盗链
  • 原文地址:https://www.cnblogs.com/henshui/p/2637807.html
Copyright © 2011-2022 走看看