使用jQuery实现页面定时弹出广告效果

1、JQuery效果

2、步骤分析：

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

3、最终实现代码：

  
    
    
    
      #father{
 border: 0px solid black;
 width: 1300px;
 height: 1600px;
 margin: auto;
      }
      #logo{
 border: 0px solid black;
 width: 1300px;
 height: 50px;
      }
      .top{
 border: 0px solid blue;
 width: 431px;
 height: 50px;
 float: left;
      }
      #top{
 padding-top: 12px;
 height: 38px;
      }
      #menu{
 border: 0px solid red;
 width:1300px;
 height: 50px;
 background: black;
 margin-bottom: 10px;
      }
      ul li{
 display: inline;
 color: white;
      }
      #product{
 border: 0px solid goldenrod;
 width: 1300px;
 height: 550px;
      }
      #product_top{
 border: 0px solid blue;
 width: 100%;
 height: 43px;
 padding-top: 5px;
      }
      #product_bottom{
 border: 0px solid green;
 width: 100%;
 height: 498px;
      }
      #product_bottom_left{
 border: 0px solid red;
 width: 200px;
 height: 498px;
 float: left;
      }
      #product_bottom_right{
 border: 0px solid saddlebrown;
 width: 1094px;
 height: 498px;
 float: left;
      }
      #big{
 border: 0px solid hotpink;
 width: 545px;
 height: 247px;
 float: left;
      }
      .small{
 border: 0px solid blue;
 width: 180px;
 height: 247px;
 float: left;
 
 text-align: center;
      }
      #bottom{
 text-align: center;
      }
      
      a{
 text-decoration: none;
      }
    
    
    
  
  
    
      
      
      
      
 
   
 
 
   
 
 
   登录
   注册
   购物车
 
      
        
      
 

   
首页
    
   
手机数码
    
   
家用电器
    
   
鞋靴箱包
    
 
 
      
      
 
      
      
      
 
   最新商品   
   
 
 
   
     
   
   
     

     
     

榨汁机
599
     
     

电视机
1599
     
     

锅
399
     
     

面包机
799
     
     

咖啡机
899
     
     

洗衣机
999
     
     

扫地机器人
1599
     
     

微波炉
1099
     
     

压力锅
799
     
   
 
      
      
      
 
      
      
      
 
      
      
      
   关于我们
   联系我们
   招贤纳士
   法律声明
   友情链接
   支付方式
   配送方式
   服务声明
   广告声明
   

     Copyright © 2005-2016 hh商城 版权所有 
   
      
    
  

总结

以上所述是小编给大家介绍的使用jQuery实现页面定时弹出广告效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！