码迷,mamicode.com
首页 > 其他好文 > 详细

50行代码图片轮播加定时广告

时间:2018-06-26 13:15:18      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:直接   html   view   hidden   load   back   code   owa   gid   

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>图片轮播+定时广告</title>
 6         <meta name="viewport" content="width=device-width, initial-scale=1">
 7         <script>
 8             function init(){
 9                 setInterval("test()",1000);
10                 //2秒后显示广告 不加var是成员变量可以直接用,加了var就变成了局部变量
11                 time=setInterval("showAd()",2000);
12             }
13             var i=1
14             function test(){
15                 i++;
16                 if(i==4){
17                     i=1;
18                 }
19                 //获取图片位置并设置src属性值
20                 document.getElementById("imgid").src="../img/"+i+".jpg";
21             }
22             // 定时广告
23             //书写显示广告图片的函数
24             function showAd(){
25                 //获取广告图片的位置并修改广告图片元素里面的属性让其显示
26                 var adEle = document.getElementById("advertising");
27                 adEle.style.display = "block";
28                 //清除显示图片的定时操作
29                 clearInterval(time);
30                 //设置隐藏图片的定时操作
31                 time = setInterval("hiddenAd()",3000);
32             }
33             //书写隐藏广告图片的函数
34             function hiddenAd(){
35                 //获取广告图片并设置其style属性的display值为none
36                 document.getElementById("advertising").style.display= "none";
37                 //清除隐藏广告图片的定时操作
38                 clearInterval(time);
39             }
40         </script>
41     </head>
42     <body onload="init()">
43         <div id="advertising" style="display:none;">
44             <img src="../img/3.jpg" id="img1"  width="100%" >
45         </div>
46         <div >
47             <img src="../img/1.jpg"  id="imgid" width="50%" >
48         </div>
49     </body>
50 </html>

 

50行代码图片轮播加定时广告

标签:直接   html   view   hidden   load   back   code   owa   gid   

原文地址:https://www.cnblogs.com/breezezqf/p/9228577.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!