1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 li {
 6     list-style-type: none;
 7 }
 8 #slide {
 9     width: 800px;
10     height: 450px;
11     position: relative;
12     margin:20px auto;
13 }
14 #slide-img {
15     position: relative;
16     width: 800px;
17     height: 450px;
18     overflow: hidden;
19 }
20 #img-container {
21     position: absolute;
22     left: 0px;
23     top: 0px;
24     height: 2250px;
25     /*font-size:0px;*/
26 }
27 #img-container img {
28     display: block;
29     float: left;
30 }
31 #slide-nums {
32     position: absolute;
33     right:10px;
34     bottom:10px;
35 }
36 #slide-nums li {
37     float: left;
38     margin:0px 10px;
39     background: white;
40     width: 20px;
41     height: 20px;
42     text-align: center;
43     line-height: 20px;
44     border-radius:10px;
45     text-indent:-999px;
46     opacity:0.6;
47     filter:alpha(opacity:60);
48     cursor:pointer;
49 }
50 #slide-nums li.active {
51     background: red;
52 }

 1 function css(obj, attr, value) {
 2     if (arguments.length == 3) {
 3         obj.style[attr] = value;
 4     } else {
 5         if (obj.currentStyle) {
 6             return obj.currentStyle[attr];
 7         } else {
 8             return getComputedStyle(obj, false)[attr];
 9         }
10     }
11 }
12 
13 function animate(obj, attr, fn) {
14     clearInterval(obj.timer);
15     var cur = 0;
16     var target = 0;
17     var speed = 0;
18     obj.timer = setInterval(function () {
19         var bFlag = true;
20         for (var key in attr) {
21             if (key == 'opacity ') {
22                 cur = css(obj, 'opacity') * 100;
23             } else {
24                 cur = parseInt(css(obj, key));
25             }
26             target = attr[key];
27             speed = ( target - cur ) / 8;
28             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
29             if (cur != target) {
30                 bFlag = false;
31                 if (key == 'opacity') {
32                     obj.style.opacity = ( cur + speed ) / 100;
33                     obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")";
34                 } else {
35                     obj.style[key] = cur + speed + "px";
36                 }
37             }
38         }
39         if (bFlag) {
40             clearInterval(obj.timer);
41             fn && fn.call(obj);
42         }
43     }, 30 );
44 }

 1 window.onload = function () {
 2     function Slide() {
 3         this.oImgContainer = document.getElementById("img-container");
 4         this.aLi = document.getElementsByTagName("li");
 5         this.index = 0;
 6     }
 7 
 8     Slide.prototype.bind = function () {
 9         var that = this;
10         for (var i = 0; i < this.aLi.length; i++) {
11             this.aLi[i].index = i;
12             this.aLi[i].onmouseover = function () {
13                 that.moveTop( this.index );
14             }
15         }
16     }
17 
18     Slide.prototype.moveTop = function (i) {
19         this.index = i;
20         for( var j = 0; j < this.aLi.length; j++ ){
21            this.aLi[j].className = '';
22         }
23         this.aLi[this.index].className = 'active';
24         animate( this.oImgContainer, {
25             "top" : -this.index * 450,
26             "left" : 0
27         });
28     }
29     
30     var oSlide = new Slide();
31     oSlide.bind();
32 
33 }