JavaScript–轮播图_带计时器

JavaScript–轮播图_带计时器 标签:play ddl center head widt

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;

作者: 番茄花园

为您推荐

返回顶部