JavaScript–轮播图_带计时器
标签:playddlcenterheadwidth按钮forasc努力
轮播图效果:
实现的功能:
1.鼠标移入,左右按钮显示
2.右下叫小圆点鼠标移入,进入下一张图
3.左右按钮点击,右下小圆点页跟随变更
4.自动开启计时器,鼠标移入右下叫小圆点区,计时器停止,鼠标移出小圆点区,计时器继续(自动下一张图片)
实现代码:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=\”UTF-8\”>
5 <title>总有人比你富有,却比你更聪明更努力!</title>
6 <style type=\”text/css\”>
7 /* css 重置 */
8 * {
9 margin: 0;
10 padding: 0;
11 list-style: none;
12 }
13
14 body {
15 background: #fff;
16 font: normal 12px/22px 宋体;
17 }
18
19 img {
20 border: 0;
21 }
22
23 a {
24 text-decoration: none;
25 color: #333;
26 }
27
28 /* 本例子css */
29 .slideBox {
30 width: 790px;
31 height: 340px;
32 overflow: hidden;
33 position: relative;
34 border: 1px solid #ddd;
35 margin: 50px auto;
36 }
37
38 .bd .hd {
39 height: 20px;
40 overflow: hidden;
41 position: absolute;
42 right: 5px;
43 bottom: 5px;