1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>轮播图</title>
6 </head>
7 <body>
8 <img id="lunbo" src="img/banner_1.jpg" alt="">
9 <img id="lunbo2" src="img/banner_1.jpg" alt="">
10 <img id="lunbo3" src="img/banner_1.jpg" alt="">
11 <script>
12 /*
13 1.使用img标签显示图片
14 2.定义一个方法，修改图片的src属性
15 2.使用循环定时器，周期调用方法
16 */
17 // var number = 0;
18 // var imgs = ["img/banner_1.jpg", "img/banner_2.jpg", "img/banner_3.jpg"];
19 // function changImg(id, imgs){
20 // number++;
21 // if(number == imgs.length){
22 // number = 0;
23 // }
24 // id.src = imgs[number];
25 // }
26 // var lunbo = document.getElementById("lunbo");
27 // setInterval(function(){
28 // changImg(lunbo, imgs);
29 // }, 1000);
30
31 /*
32 提供更通用的代码，实现轮播图效果
33 需要的参数，imgs, 轮播图片对象，轮播的周期，构造出一个轮播图对象
34 */
35 function LunBo(imgEle, imgs, time){
36 //关键点:LunBo函数中的this和其内部的匿名函数中的this名称冲突，需要重命名个变量。
37 var obj = this;
38 //保存参数，1.编号 2.图片数组 3.img元素 4.轮播周期
39 this.number = 0;
40 this.imgs = imgs;
41 this.imgEle = imgEle;
42 this.time = time;
43
44 this.changeImg = function(){
45 obj.number++;
46 if(obj.number == obj.imgs.length){
47 obj.number = 0;
48 }
49 obj.imgEle.src = obj.imgs[obj.number];
50 };
51
52 this.timer = setInterval(function(){
53 obj.changeImg();
54 }, obj.time);
55
56 this.stop = function(){
57 clearInterval(obj.timer);
58 };
59 }
60 var lunBo = new LunBo(document.getElementById("lunbo"),
61 ["img/banner_1.jpg", "img/banner_2.jpg", "img/banner_3.jpg"],
62 3000);
63 var lunBo2 = new LunBo(document.getElementById("lunbo2"),
64 ["img/banner_1.jpg", "img/banner_2.jpg", "img/banner_3.jpg"],
65 8000);
66 var lunBo3 = new LunBo(document.getElementById("lunbo3"),
67 ["img/banner_1.jpg", "img/banner_2.jpg"],
68 100);
69 </script>
70 </body>
71 </html>
轮播图 定时器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>自动跳转首页</title>
6 </head>
7 <body>
8 <span id="second-num">5</span>秒后自动跳转首页
9 <script>
10 /*
11 分析：
12 1.倒计时读秒效果
13 2.定义一个方法，获取span标签，修改其内容，并减1
14
15 */
16 var second = 5;
17 var timeEle = document.getElementById("second-num");
18 function showTime(){
19 second--;
20 if(second <= 0){
21 location.href = "https://www.baidu.com";
22 return;//必须加，不然的话当加载时，会继续读秒。
23 }
24 timeEle.innerHTML = second;
25 }
26 setInterval(showTime, 1000);
27 </script>
28 </body>
29 </html>
自动跳转 定时器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>工具提示</title>
6 <style>
7 div{
8 width: 100px;
9 height: 100px;
10 margin: 100px;
11 background-color: brown;
12 }
13 #switch{
14 border: 10px solid black;
15 position: relative;
16 box-sizing: border-box;
17 }
18 #tip{
19 left: 200px;
20 top: 0px;
21 position: absolute;
22 background-color: purple;
23 margin: 0px;
24 }
25 </style>
26 </head>
27 <body>
28
29 <div id="switch">
30 开关
31 <div id="tip" >
32 提示
33 </div>
34 </div>
35
36 <script>
37 /*
38 不带延迟的工具提示
39 */
40 // var switchElem = document.getElementById("switch");
41 // switchElem.onmouseenter = function(){
42 // var tip = document.getElementById("tip");
43 // tip.hidden = false;
44 // }
45 //
46 // switchElem.onmouseleave = function(){
47 // var tip = document.getElementById("tip");
48 // tip.hidden = true;
49 // }
50 </script>
51
52 <script>
53 /*
54 带延迟的工具提示
55 */
56 var switchElem = document.getElementById("switch");
57 //保存定时器
58 var switchTimer;
59 switchElem.onmouseenter = function(){
60 var tip = document.getElementById("tip");
61 if(switchTimer){
62 clearTimeout(switchTimer)
63 }
64 tip.hidden = false;
65 }
66
67 switchElem.onmouseleave = function(){
68 var tip = document.getElementById("tip");
69 switchTimer = setTimeout(function(){
70 tip.hidden = true;
71 }, 300);
72 }
73 </script>
74 </body>
75 </html>
工具提示 定时器
原文地址：https://www.cnblogs.com/mozq/p/10777173.html
时间： 2024-10-09 12:09:03