Use jQuery to implement the function of timing pop-up advertisements on the page

jQuery can achieve many functions. This article mainly introduces the use of jQuery to achieve the effect of timing pop-up advertisements on the page. Friends who need it can refer to it. I hope it can help everyone.

1. JQuery effect

2. Step analysis:

Step one: Introduce jQuery related files

Step 2: Write the page loading function

Step 3: In the page loading function, obtain the element that displays the advertising image.

Step 4: Set a scheduled operation (function to display advertising images)

Step 5: In the function that displays advertising images, use the jQuery method to display advertising images (show() )

Step 6: Clear the scheduled operation for displaying advertising images

Step 7: Set up scheduled operations (function to hide advertising images)

Step 8: After hiding In the function of the advertising image, use the jQuery method to hide the advertising image (hide())

Step 9: Clear the scheduled operation of hiding the advertising image

<script></script>
    <script>
      $(function(){
        //1.书写显示广告图片的定时操作
        time=setInterval("showAd()",3000);
      });
      //2.书写显示图片的函数
      function showAd(){
        //3.获取广告图片，并让其显示
        //$("#img_2").show(1000);
        $("#img_2").slideDown(3000);  //滑入
        //4.清除显示图片的定时操作
        clearInterval(time);
        //5.设置隐藏图片的定时操作
        time=setInterval("hiddenAd()",3000);
      }
      function hiddenAd(){
        //6.获取广告图片让其隐藏
        //$("#img_2").hide();
        $("#img_2").slideUp(3000);  //滑出
        //7.清除隐藏图片的定时操作
        clearInterval(time);
      }    
    </script>

3. Final implementation code:

nbsp;html>

  
    <meta>
    <title>首页</title>
    <style>
      #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;
      }
    </style>
    <script></script>
    <script>
      $(function(){
        //1.书写显示广告图片的定时操作
        time=setInterval("showAd()",3000);
      });
      //2.书写显示图片的函数
      function showAd(){
        //3.获取广告图片，并让其显示
        //$("#img_2").show(1000);
        $("#img_2").slideDown(3000);  //滑动
        //4.清除显示图片的定时操作
        clearInterval(time);
        //5.设置隐藏图片的定时操作
        time=setInterval("hiddenAd()",3000);
      }
      function hiddenAd(){
        //6.获取广告图片让其隐藏
        //$("#img_2").hide();
        $("#img_2").slideUp(3000);
        //7.清除隐藏图片的定时操作
        clearInterval(time);
      }    
    </script>
  
  
    <p>
      <!--定时弹出广告图片位置-->
      <img  src="/static/imghwm/default1.png" data-src="../img/pic.jpg" class="lazy" alt="Use jQuery to implement the function of timing pop-up advertisements on the page" >
      <!--1.logo部分-->
      </p><p>
        </p><p>
          <img  src="/static/imghwm/default1.png" data-src="../img/logo2.png" class="lazy" alt="Use jQuery to implement the function of timing pop-up advertisements on the page" >
        </p>
        <p>
          <img  src="/static/imghwm/default1.png" data-src="../img/header.png" class="lazy" alt="Use jQuery to implement the function of timing pop-up advertisements on the page" >
        </p>
        <p>
          <a>登录</a>
          <a>注册</a>
          <a>购物车</a>
        </p>
      
      <!--2.导航栏部分-->  
      <p>
        </p>

          
• 首页
               
• 手机数码
               
• 家用电器
               
• 鞋靴箱包
             

                      

               

             

        

          最新商品                       

        

          

                       

          

            

                           

            

                             

榨汁机

              

599

                         

                             

电视机

              

1599

                         

                             

锅

              

399

                         

                             

面包机

              

799

                         

                             

咖啡机

              

899

                         

                             

洗衣机

              

999

                         

                             

扫地机器人

              

1599

                         

                             

微波炉

              

1099

                         

                             

压力锅

              

799

                                                     

               

             

               

             

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

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

              

Related recommendations:

How to achieve the homepage wall-through advertising effect in CSS3

How to achieve the Taobao product advertising effect using JavaScript Detailed example explanation

JS web page side scrolling advertising effect

The above is the detailed content of Use jQuery to implement the function of timing pop-up advertisements on the page. For more information, please follow other related articles on the PHP Chinese website!