jQuery를 사용하여 페이지에 팝업 광고 타이밍 기능 구현

jQuery는 다양한 기능을 구현할 수 있습니다. 이 글에서는 주로 jQuery를 사용하여 페이지에서 팝업 광고 타이밍 효과를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

1. JQuery 효과

2. 단계 분석:

1단계: jQuery 관련 파일 소개

2단계: 페이지 로딩 기능 작성

3단계: 페이지 로딩 기능에서 표시되는 요소를 가져옵니다. 광고 이미지.

4단계: 예약된 작업 설정(광고 이미지 표시 기능)

5단계: 광고 이미지 표시 기능에서 jQuery 메소드를 사용하여 광고 이미지 표시(show())

6단계: 예약 취소 광고 이미지 표시 작업

7단계: 예약 작업 설정(광고 이미지 숨기기 기능)

8단계: 광고 이미지 숨기기 기능에서 jQuery 메서드를 사용하여 광고 이미지 숨기기(hide())

9단계 : 숨겨진 광고 이미지의 예정된 작업을 지웁니다

<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. 최종 구현 코드:

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="jQuery를 사용하여 페이지에 팝업 광고 타이밍 기능 구현" >
      <!--1.logo部分-->
      </p><p>
        </p><p>
          <img  src="/static/imghwm/default1.png" data-src="../img/logo2.png" class="lazy" alt="jQuery를 사용하여 페이지에 팝업 광고 타이밍 기능 구현" >
        </p>
        <p>
          <img  src="/static/imghwm/default1.png" data-src="../img/header.png" class="lazy" alt="jQuery를 사용하여 페이지에 팝업 광고 타이밍 기능 구현" >
        </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商城 版权所有            

              

관련 권장 사항:

CSS3에서 홈페이지 벽 광고 효과를 얻는 방법

Taobao 제품 광고를 구현하는 방법 JavaScript 효과의 자세한 예

JS 웹페이지 횡스크롤 광고 효과

위 내용은 jQuery를 사용하여 페이지에 팝업 광고 타이밍 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!