function getStyle(obj,name){
2 if(obj.currentStyle){
3 return obj.currentStyle[name];
4 } else{
5 return getComputedStyle(obj,false)[name];
6 }
7 }
8
9 function startMove(obj, json, fnEnd) {
10 clearInterval(obj.timer);
11 obj.timer = setInterval(function() {
12 var bStop = true;
13 for (var attr in json) {
14 var cur = 0;
15 if (attr == "opacity") {
16 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
17 } else {
18 cur = parseInt(getStyle(obj, attr))
19 }
20 var speed = (json[attr] - cur) / 10;
21 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
22 if (cur !== json[attr]) {
23 bStop = false;
24 };
25 if (attr == "opacity") {
26 obj.style.opacity = (speed + cur) / 100;
27 obj.style.filter = 'alpha(opacity:' + (speed + cur) + ')';
28 } else {
29 obj.style[attr] = cur + speed + 'px';
30 }
31 }
32 if (bStop) {
33 clearInterval(obj.timer);
34 if (fnEnd) fnEnd();
35 }
36 }, 30)
37 }
ç¶ååè½®æå°æ¡ä¾
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>æ·å®è½®æ</title>
7 <style>
8 ul,
9 li {
10 list-style: none;
11 margin: 0;
12 padding: 0;
13 }
14
15 #wrap {
16 width: 400px;
17 height: 225px;
18 margin: 0 auto;
19 position: relative;
20 overflow: hidden;
21 }
22
23 li {
24 float: left;
25 }
26
27 #tips li {
28 margin: 5px;
29 border: 1px solid #f60;
30 width: 20px;
31 height: 20px;
32 line-height: 20px;
33 text-align: center;
34 color: white;
35 cursor: pointer;
36 }
37
38 .active {
39 background: #f60;
40 }
41
42 img {
43 vertical-align: top;
44 width: 400px;
45 }
46
47 #content {
48 width: 2400px;
49 position: absolute;
50 left: -1200px;
51 }
52
53 #content li {
54 float: left;
55 }
56
57 #tips {
58 position: absolute;
59 right: 20px;
60 bottom: 5px;
61 }
62 </style>
63 </head>
64
65 <body>
66 <div id="wrap">
67 <ul id="content">
68 <li><img src="img3/1.jpg" alt=""></li>
69 <li><img src="img3/2.jpg" alt=""></li>
70 <li><img src="img3/3.jpg" alt=""></li>
71 <li><img src="img3/4.jpg" alt=""></li>
72 <li><img src="img3/5.jpg" alt=""></li>
73 <li><img src="img3/6.jpg" alt=""></li>
74 </ul>
75 <ul id="tips">
76 <li>1</li>
77 <li>2</li>
78 <li>3</li>
79 <li>4</li>
80 <li>5</li>
81 </ul>
82 </div>
83 <script src="move.js"></script>
84 <script>
85 var wrap = document.getElementById('wrap');
86 var content = document.getElementById('content');
87 var tips = document.getElementById('tips');
88 var aLi = tips.getElementsByTagName('li');
89 var now = 0;
90 //var
91 for (var i = 0; i < aLi.length; i++) {
92 aLi[0].className = 'active'; //æåå§ç¶æå®ä¹å¥½
93 content.style.left = 0 +'px';
94 aLi[i].index = i; //èªå®ä¹å±æ§
95 aLi[i].onclick = function() {
96 now = this.index;
97 play();
98 }
99 }
100
101 function play() {
102 for (var j = 0; j < aLi.length; j++) {
103 aLi[j].className = '';
104 }
105 aLi[now].className = 'active';
106
107 //this.index = now; //åè¿æ¥åå°±ä¸å¯¹äºå¤§å
å¼
108 //content.style.left = -400 * this.index + 'px';
109 startMove(content, {
110 left: -400 * now, //ä½ è¿çå«è¯´ï¼jsonæ ¼å¼å°±æ¯è¿ä¹åç
111 });
112 }
113
114 function autoPlay() {
115 now++;
116 if (now == aLi.length) {
117 now = 0;
118 }
119 play();
120 }
121
122 var timer = setInterval(autoPlay, 2000);
123 wrap.onmouseover = function(){ //è¿éå¦ææäºä»¶ç»å®å°ulä¸çè¯ï¼é£ä¹é¼ æ 移å
¥ï¼ä¸é¢å¯¹é¥®çliä¼ä¸èµ·ä½ç¨ï¼
124 clearInterval(timer); //å 为liçå±çº§æ¯è¾é«ï¼æ以åºè¯¥æäºä»¶ç»å®å°å¤§çdivä¸
125 }
126 wrap.onmouseout = function(){
127 timer = setInterval(autoPlay,2000);
128 //setInterval(autoPlay,2000); ä¸è½è¿ä¹åï¼å¡æ¯å¼çå®æ¶å¨ï¼å¿
é¡»å¾èµå¼ï¼è¦ä¸ç¶æ»ä¼å¤å¼ä¸ä¸ªå®æ¶å¨ï¼å¯¼è´é度å å¿«
129 }
130 </script>
131 </body>
132
133 </html>