1.css
<STYLE>.FL{float: Left;}. Slider0 img{Display:Block;width:100px;padding:2px; }. Slider0 Li{background:URL ("http://www.lampbrother.net/php/statics/images/lamp/php_qiye_bg.png") no-repeat scroll 120px 5px;Color:#000000;font-size:15px;Height:150px;Margin-left:10px;Overflow:Hidden;padding:10px 0;width:100%;}. Slider0 P{Color:#808080;float: Left;Font:12px/25px verdana,tahoma, ' Microsoft yahei ', ' SimSun ';margin:10px 0 0;Padding-left:70px;width:720px;}. Slider0. Tit{Color:#333333;Font:15px/25px verdana,tahoma, ' Microsoft yahei ', ' SimSun ';}</style>
2.html
<Divclass= "WP"> <ulID= "Slider"class= "Slider0"style= "TOP:0PX;LIST-STYLE-TYPE:DISC;"> <Listyle= "opacity:1;"> <aclass= "FL"><imgsrc= "<?=base_url (' uploads ')? >/tou1.jpg"alt= "php video tutorial |php Tutorial"></a> <Pclass=>Li</P> <P>Very good!</P> </Li><Listyle= "opacity:1;"> <aclass= "FL"><imgsrc= "<?=base_url (' uploads ')? >/tou2.jpg"alt= "php video tutorial |php Tutorial"></a> <Pclass=>Li Haihai</P> <P>Good</P> </Li><Listyle= "opacity:1;"> <aclass= "FL"><imgsrc= "<?=base_url (' uploads ')? >/tou3.jpg"alt= "php video tutorial |php Tutorial"></a> <Pclass=>Liu</P> <P>That's great!</P> </Li><Listyle= "opacity:1;"> <aclass= "FL"><imgsrc= "<?=base_url (' uploads ')? >/tou4.jpg"alt= "php video tutorial |php Tutorial"></a> <Pclass=>Chen Chen</P> <P>Very powerful!</P> </Li> </ul> </Div>
3.js
<script type= "Text/javascript" >
function h$ (i) {return document.getElementById (i)}
function h$$ (c, p) {return p.getelementsbytagname (c)}
var slider = function () {
function init (o) {
This.id = o.id;
this.at = O.auto? O.auto:3;
THIS.O = 0;
This.pos ();
}
Init.prototype = {
Pos:function () {
Clearinterval (This.__b);
THIS.O = 0;
var el = h$ (this.id), Li = h$$ (' li ', el), L = li.length;
var _t = li[l-1].offsetheight;
var cl = Li[l-1].clonenode (TRUE);
cl.style.opacity = 0; Cl.style.filter = ' alpha (opacity=0) ';
El.insertbefore (cl, el.firstchild);
El.style.top =-_t + ' px ';
This.anim ();
},
Anim:function () {
var _this = this;
this.__a = setinterval (function () {_this.animh ()}, 20);
},
Animh:function () {
var _t = parseint (h$ (this.id). style.top), _this = this;
if (_t >=-1) {
Clearinterval (this.__a);
h$ (this.id). style.top = 0;
var list = h$$ (' li ', h$ (this.id));
h$ (this.id). RemoveChild (List[list.length-1]);
This.__c = setinterval (function () {_this.animo ()}, 20);
This.auto ();
}else {
var __t = Math.Abs (_t)-Math.ceil (Math.Abs (_t) *.07);
h$ (this.id). Style.top =-__t + ' px ';
}
},
Animo:function () {
THIS.O + = 2;
if (THIS.O = = 100) {
Clearinterval (This.__c);
h$$ (' Li ', h$ (this.id)) [0].style.opacity = 1;
h$$ (' Li ', h$ (this.id)) [0].style.filter = ' alpha (opacity=100) ';
This.auto ();
}else {
h$$ (' Li ', h$ (this.id)) [0].style.opacity = this.o/100;
h$$ (' Li ', h$ (this.id)) [0].style.filter = ' alpha (opacity= ' +this.o+ ') ';
}
},
Auto:function () {
var _this = this;
This.__b = setinterval (function () {_this.pos ()}, this.at*1000);
}
}
Return init;
}();
New Slider ({id: ' Slider '})
</script>