1、获取图片的位置(document.getElementById(“”))
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”，3000);
2、步骤分析 （此案例页面定时弹出广告基于JavaScript学习——实现首页轮播图效果实现的）
第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步： 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()
1 <script>
2 function init(){
3 //书写轮播图显示的定时操作
4 setInterval("changImg()",3000);
5 //1.设置显示广告图片的定时操作
6 time=setInterval("showAd()",3000);
7 }
8
9 //书写轮播图函数
10 var i=1;
11 function changImg(){
12 i++;
13
14 //获取图片位置并设置src属性值
15 document.getElementById("img_1").src="../img/"+i+".jpg";
16 if(i==3){
17 i=0;
18 }
19 }
20
21 //2.书写显示广告图片的函数
22 function showAd(){
23 //3.获取广告图片的位置
24 var adEle=document.getElementById("img_2");
25 //4.修改广告图片元素里面的属性让其显示
26 adEle.style.display="block";
27 //5.清除显示图片的定时操作
28 clearInterval(time);
29 //6.设置隐藏图片的定时操作
30 time=setInterval("hiddenAd()",3000);
31 }
32
33 //7.书写隐藏广告图片的函数
34 function hiddenAd(){
35 //8.获取广告图片并设置其style属性的display值为none
36 document.getElementById("img_2").style.display="none";
37 //9.清除隐藏广告图片的定时操作
38 clearInterval(time);
39 }
40 </script>
HTML代码：
<body body >
<!--定时弹出广告图片位置-->
<img src="../img/pic.jpg" width="100%" style="display: none;" id="img_2"/>
3、最终实现代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>首页</title>
6 <style>
7 #father{
8 border: 0px solid black;
9 width: 1300px;
10 height: 1600px;
11 margin: auto;
12 }
13 #logo{
14 border: 0px solid black;
15 width: 1300px;
16 height: 50px;
17 }
18 .top{
19 border: 0px solid blue;
20 width: 431px;
21 height: 50px;
22 float: left;
23 }
24 #top{
25 padding-top: 12px;
26 height: 38px;
27 }
28
29 #menu{
30 border: 0px solid red;
31 width:1300px;
32 height: 50px;
33 background: black;
34 margin-bottom: 10px;
35 }
36 ul li{
37 display: inline;
38 color: white;
39 }
40 #product{
41 border: 0px solid goldenrod;
42 width: 1300px;
43 height: 550px;
44 }
45 #product_top{
46 border: 0px solid blue;
47 width: 100%;
48 height: 43px;
49 padding-top: 5px;
50 }
51 #product_bottom{
52 border: 0px solid green;
53 width: 100%;
54 height: 498px;
55 }
56
57 #product_bottom_left{
58 border: 0px solid red;
59 width: 200px;
60 height: 498px;
61 float: left;
62 }
63 #product_bottom_right{
64 border: 0px solid saddlebrown;
65 width: 1094px;
66 height: 498px;
67 float: left;
68 }
69 #big{
70 border: 0px solid hotpink;
71 width: 545px;
72 height: 247px;
73 float: left;
74 }
75 .small{
76 border: 0px solid blue;
77 width: 180px;
78 height: 247px;
79 float: left;
80 /*让里面的内容居中*/
81 text-align: center;
82 }
83 #bottom{
84 text-align: center;
85 }
86 /*去掉超链接的下划线*/
87 a{
88 text-decoration: none;
89 }
90 </style>
91
92 <script>
93 function init(){
94 //书写轮播图显示的定时操作
95 setInterval("changImg()",3000);
96 //1.设置显示广告图片的定时操作
97 time=setInterval("showAd()",3000);
98 }
99
100 //书写轮播图函数
101 var i=1;
102 function changImg(){
103 i++;
104
105 //获取图片位置并设置src属性值
106 document.getElementById("img_1").src="../img/"+i+".jpg";
107 if(i==3){
108 i=0;
109 }
110 }
111
112 //2.书写显示广告图片的函数
113 function showAd(){
114 //3.获取广告图片的位置
115 var adEle=document.getElementById("img_2");
116 //4.修改广告图片元素里面的属性让其显示
117 adEle.style.display="block";
118 //5.清除显示图片的定时操作
119 clearInterval(time);
120 //6.设置隐藏图片的定时操作
121 time=setInterval("hiddenAd()",3000);
122 }
123
124 //7.书写隐藏广告图片的函数
125 function hiddenAd(){
126 //8.获取广告图片并设置其style属性的display值为none
127 document.getElementById("img_2").style.display="none";
128 //9.清除隐藏广告图片的定时操作
129 clearInterval(time);
130 }
131 </script>
132 </head>
133 <body body onload="init()">
134 <div id="father">
135 <!--定时弹出广告图片位置-->
136 <img src="../img/pic.jpg" width="100%" style="display: none;" id="img_2"/>
137
138 <!--1.logo部分-->
139 <div id="logo">
140 <div class="top">
141 <img src="../img/logo2.png" height="46px" />
142 </div>
143 <div class="top">
144 <img src="../img/header.png" height="46px"/>
145 </div>
146 <div class="top" id="top">
147 <a href="#">登录</a>
148 <a href="#">注册</a>
149 <a href="#">购物车</a>
150 </div>
151 </div>
152
153 <!--2.导航栏部分-->
154 <div id="menu">
155 <ul>
156 <a href="#"><li style="font-size: large;">首页</li></a>
157 <a href="#"><li>手机数码</li></a>
158 <a href="#"><li>家用电器</li></a>
159 <a href="#"><li>鞋靴箱包</li></a>
160 </ul>
161 </div>
162
163 <!--3.轮播图部分-->
164 <div id="">
165 <img src="../img/1.jpg" width="100%" height="100%" id="img_1"/>
166 </div>
167
168 <!--4.最新商品-->
169 <div id="product">
170
171 <div id="product_top">
172 <span style="font-size: 25px">最新商品</span>
173 <img src="../img/title2.jpg"/>
174 </div>
175
176 <div id="product_bottom">
177
178 <div id="product_bottom_left">
179 <img src="../img/big01.jpg" width="100%" height="100%" />
180 </div>
181
182 <div id="product_bottom_right">
183 <div id="big">
184 <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
185 </div>
186
187 <div class="small">
188 <a href="#"><img src="../img/small01.jpg" ></a>
189 <a href="#"><p style="color: gray;">榨汁机</p></a>
190 <p style="color: red;">599</p>
191 </div>
192 <div class="small">
193 <a href="#"><img src="../img/small02.jpg" ></a>
194 <a href="#"><p style="color: gray;">电视机</p></a>
195 <p style="color: red;">1599</p>
196 </div>
197 <div class="small">
198 <a href="#"><img src="../img/small03.jpg" ></a>
199 <a href="#"><p style="color: gray;">锅</p></a>
200 <p style="color: red;">399</p>
201 </div>
202 <div class="small">
203 <a href="#"><img src="../img/small04.jpg" ></a>
204 <a href="#"><p style="color: gray;">面包机</p></a>
205 <p style="color: red;">799</p>
206 </div>
207 <div class="small">
208 <a href="#"><img src="../img/small05.jpg" ></a>
209 <a href="#"><p style="color: gray;">咖啡机</p></a>
210 <p style="color: red;">899</p>
211 </div>
212 <div class="small">
213 <a href="#"><img src="../img/small06.jpg" ></a>
214 <a href="#"><p style="color: gray;">洗衣机</p></a>
215 <p style="color: red;">999</p>
216 </div>
217 <div class="small">
218 <a href="#"><img src="../img/small07.jpg" ></a>
219 <a href="#"><p style="color: gray;">扫地机器人</p></a>
220 <p style="color: red;">1599</p>
221 </div>
222 <div class="small">
223 <a href="#"><img src="../img/small09.jpg" ></a>
224 <a href="#"><p style="color: gray;">微波炉</p></a>
225 <p style="color: red;">1099</p>
226 </div>
227 <div class="small">
228 <a href="#"><img src="../img/small08.jpg" ></a>
229 <a href="#"><p style="color: gray;">压力锅</p></a>
230 <p style="color: red;">799</p>
231 </div>
232 </div>
233 </div>
234 </div>
235
236 <!--5.广告图片-->
237 <div id="">
238 <img src="../img/ad.jpg" width="100%"/>
239 </div>
240
241 <!--6.广告图片-->
242 <div id="">
243 <img src="../img/footer.jpg" width="100%"/>
244 </div>
245
246 <!--7.友情链接和版权信息-->
247 <div id="bottom">
248 <a href="#"><font>关于我们</font></a>
249 <a href="#"><font>联系我们</font></a>
250 <a href="#"><font>招贤纳士</font></a>
251 <a href="#"><font>法律声明</font></a>
252 <a href="#"><font>友情链接</font></a>
253 <a href="#"><font>支付方式</font></a>
254 <a href="#"><font>配送方式</font></a>
255 <a href="#"><font>服务声明</font></a>
256 <a href="#"><font>广告声明</font></a>
257 <p>
258 Copyright ? 2005-2016 hh商城 版权所有
259 </p>
260 </div>
261 </div>
262 </body>
263 </html>
在浏览器内运行，效果为页面停留三秒后显示广告，广告停留三秒后再消失。
时间： 2024-08-27 23:29:50