Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> Tencent Software homepage Picture Slide transition effect </title> <meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead > Between--> <style type= "Text/css" > body {padding-bottom:0px; margin:0px; padding-left:0px ; padding-top:0px; UL {padding-bottom:0px; margin:0px; padding-left:0px; padding-right:0px; padding-top:0px;} container {width: 610px; height:205px; }. Container a img {width:610px height:205px; container img {border-bottom-style:none; border-right-style:none ; Border-top-style:none; Border-left-style:none; }. Td_f a img {padding-bottom:0px; margin:0px padding-left:0px; padding-right:0px; padding-top:0px}. num {posi Tion:absolute; width:90px; Float:right; top:180px; left:520px; }. numLi {text-align:center; line-height:15px; list-style-type:none; margin:1px; width:15px; font-family:arial; Backgrou Nd:url (http://www.zzsky.cn/effect/images/200910092050/flashbutton.gif) no-repeat-15px 0px; Float:left; height:15px; Color: #86a2b8; font-size:12px; Cursor:pointer; }, num li.on {line-height:15px; width:15px background:url (http://www.zzsky.cn/effect/images/200910092050/ Flashbutton.gif) No-repeat; height:15px; Color: #ffffff; }. more {float:right; More1 a {text-align:left; line-height:25px; margin:0px 0px 0px 10px; color: #3373a3;} &L T;/style> <script language= "JavaScript" > if (typeof (pgvmain) = = ' function ') pgvmain (); </script> <script language= "JavaScript" > var gtoptab= "one"; function $id (ID) {return document.getElementById (ID); } function Changestab (tab_id) {if (tab_id==gtoptab) {return; }else{$id (gtoptab). Classname= "Unselect"; $id (tab_id). classname= "SELECT"; $id ("Tab_" +gtoptab). style.display= "None"; $id("Tab_" +tab_id). style.display= "Block"; gtoptab=tab_id; } </script> <script language= "JavaScript" > var $ = function (ID) {return "string" = = typeof ID? document. getElementById (ID): ID; }; var Extend = function (destination, source) {for (var property in source) {Destination[property] = Source[property]; return destination; var currentstyle = function (Element) {return Element.currentstyle | | Document.defaultView.getComputedStyle (ELEMENT, NULL); The var Bind = function (object, fun) {var args = Array.prototype.slice.call (arguments). Slice (2); return function () {return Fun.apply (object, Args.concat (Array.prototype.slice.call (arguments)); } var Tween = {quart: {easeout:function (t,b,c,d) {return-c * ((t=t/d-1) *t*t*t-1) + B; }, Back: {easeout:function (t,b,c,d,s) {if (s = = undefined) s = 1.70158; Return c* ((t=t/d-1) *t* ((s+1) *t + s) + 1) + B; }, Bounce: {easeout:function (t,b,c,d) {if (T/=d) < (1/2.75)) {RetuRN c* (7.5625*t*t) + B; else if (T < (2/2.75)) {return c* (7.5625* (t-= (1.5/2.75)) *t +.) + B; else if (T < (2.5/2.75)) {return c* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + b; else {return c* (7.5625* (t-= (2.625/2.75)) *t +. 984375) + b; }}//Container object, sliding object, toggle quantity var Slidetrans = function (container, slider, count, options) {This._slider = $ (slider); This._container = $ (container);//Container Object This._timer = null;//Timer This._count = Math.Abs (count);//Toggle Quantity This._target = 0;// Target value this._t = This._b = This._c = 0;//tween parameter this. index = 0;//Current Index this. SetOptions (options); This. Auto =!! This.options.Auto; This. Duration = Math.Abs (this.options.Duration); This. Time = Math.Abs (this.options.Time); This. Pause = Math.Abs (This.options.Pause); This. Tween = This.options.Tween; This.onstart = This.options.onStart; This.onfinish = This.options.onFinish; var bvertical =!! this.options.Vertical; This._css = bvertical? ' Top ': ' Left ';//direction/style set var p = CurrentsTyle (This._container). Position; p = = "Relative" | | p = = "Absolute" | | (this._container.style.position = "relative"); This._container.style.overflow = "hidden"; This._slider.style.position = "absolute"; This. Change = This.options.Change? This.options.change:this._slider[bvertical? "Offsetheight": "offsetwidth"]/this._count; }; Slidetrans.prototype = {//Set default property Setoptions:function (options) {this.options = {//default value vertical:true,//vertical orientation (direction not Can change) auto:true,//whether automatic change:0,//change amount duration:50,//sliding duration time:10,//Sliding delay pause:4000,//Pause time (valid when auto is true) Onstart:function () {},//executes the tween:tween.quart.easeout//tween operator} when the conversion is initiated onfinish:function () {},//completes the transformation; Extend (this.options, Options | | {}); },//Start switching run:function (index) {//fix index index = = undefined && (index = this. Index); Index < 0 && (index = this._count-1) | | Index >= this._count && (index = 0); Set the parameter This._target =-math.abs (this. Change) * (this. Index = index); this._t = 0; This._b = parseint (Currentstyle (this._slider) [this.options.Vertical? "Top": "Left"]); This._c = This._target-this._b; This.onstart (); This. Move (); },//Mobile Move:function () {cleartimeout (This._timer); Continue moving without reaching the target, otherwise the next slide if (this._c && this._t < this. Duration) {this. MoveTo (this. Math.Round Tween (this._t++, This._b, This._c, this.) Duration))); This._timer = settimeout (Bind (this, this.) Move), this. Time); }else{this. MoveTo (This._target); This. Auto && (This._timer = settimeout (Bind (this). Next), this. Pause)); },//Move to Moveto:function (i) {THIS._SLIDER.STYLE[THIS._CSS] = i + "px"; },//Next next:function () {this. Run (++this. Index); },//previous previous:function () {this. Run (--this. Index); },//Stop stop:function () {cleartimeout (This._timer); MoveTo (This._target); } }; </script> </pead> <body> <!--Add the following code to the--> <div id= between <body> and </body> IdcontainEr2 "class=" container "> <table id=" idSlider2 "border=" 0 "cellspacing=" 0 "cellpadding=" 0 "> <tr> <TD class= "Td_f" ></td> <td class= "Td_f" ></td> <td class= "Td_f" ></td> <TD class= "Td_f" ></td> <td class= "Td_f" ></td> </tr> </table> <ul id= "Idnum" class= "num" ></ul> </div> <script language= "JavaScript" >//new slidetrans ("Idcontainer", "Idslider", 3). Run (); var ForEach = function (array, callback, Thisobject) {if ( Array.foreach) {Array.foreach (callback, Thisobject); }else{for (var i = 0, len = Array.Length i < len; i++) {Callback.call (Thisobject, array[i], I, array); } var st = new Slidetrans ("IdContainer2", "IdSlider2", 5, {vertical:false}); var nums = []; Inserts a number for (var i = 0, n = st._count-1 i <= n;) {(Nums[i] = $ ("Idnum"). AppendChild (document.createelement("Li")). InnerHTML = ++i; ForEach (nums, function (o, i) {o.onmouseover = function () {o.classname = "on"; Auto = false; St. Run (i); } o.onmouseout = function () {o.classname = ""; St. Auto = true; St. Run (); }//Set button style St.onstart = function () {ForEach (nums, function (o, i) {o.classname = St. Index = I? "On": "";})} $ ("Idauto"). onclick = function () {//if (St. Auto) {//st. Auto = false; St. Stop (); This.value = "Automatic"; }else{//st. Auto = true; St. Run (); This.value = "Stop"; }//}//$ ("Idnext"). onclick = function () {St. Next (); }//$ ("Idpre"). onclick = function () {St. Previous (); }//$ ("Idtween"). onchange = function () {//switch (parseint (this.value)) {//case 2://st. Tween = Tween.Bounce.easeOut; Break Case 1://st. Tween = Tween.Back.easeOut; Break Default://st. Tween = Tween.Quart.easeOut; }//} St. Run (); </script> </body> </ptml>
Tip: You can modify some of the code before running
