Tip: you can modify some code before running
JavaScript Image sliding switching effect<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JavaScript Image sliding switching effect</title><script type="text/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);} 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-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) + B;} else if (t <(2/2. 75 )){ Return c * (7.5625 * (t-= (1.5/2.75) * t +. 75) + 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, slide object, switch 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); // number of switches this. _ target = 0; // target value this. _ t = this. _ B = this. _ c = 0; // The 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 setting 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 the default property SetOptions: function (options) {this. options = {// Default Vertical: true, // whether the Vertical direction (direction cannot be changed) Auto: true, // whether to automatically Change: 0, // Change the amount of Duration: 50, // sliding duration Time: 10, // sliding delay Pause: 2000, // Pause Time (effective when Auto is true) onStart: function (){}, // execute onFinish: function () {}when starting the conversion, // execute Tween: Tween when the conversion is completed. quart. easeOut // tween operator}; Extend (this. options, options | |{}) ;}, // start to cut Run: function (index) {// modify indexindex = 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 () ;}, // Move: function () {clearTimeout (this. _ timer); // if (this. _ c & this. _ t <this. duration) {this. moveTo (Math. round (this. 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, this. next), this. pause) ;}}, // Move to MoveTo: function (I) {this. _ slider. style [this. _ css] = I + "px" ;}, // Next: function () {this. run (++ this. index) ;}, // The Previous: function () {this. run (-- this. index) ;}, // Stop: function () {clearTimeout (this. _ timer); this. moveTo (this. _ target );}};</script></head><body><style type="text/css">. Container,. container img {width: 280px; height: 200px;}. container {border: 1px solid #333 ;}. container img {border: 0 ;}</style><div class="container" id="idContainer"><table id="idSlider" border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></table></div><br /><br /><style type="text/css">. Num {position: absolute; right: 5px; bottom: 5px ;}. num li {float: left; list-style: none; color: # fff; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; margin: 1px; border: 1px solid #707070; background-color: # 060a0b ;}. num li. on {line-height: 18px; width: 18px; height: 18px; font-size: 14px; border: 0; background-color: # ce0609; font-weight: bold ;}</style><div class="container" id="idContainer2"><table id="idSlider2" border="0" cellpadding="0" cellspacing="0"><tr><td></td><td></td><td></td></tr></table><ul class="num" id="idNum"></ul></div><br /><div><input id="idAuto" type="button" value="停止" /><input id="idPre" type="button" value="<<" /><input id="idNext" type="button" value=">>" /><select id="idTween"><option value="0">Default easing</option><option value="1">Method 1</option><option value="2">Method 2</option></select></div><script>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", 3, { Vertical: false });var nums = [];//插入数字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"; st.Auto = false; st.Run(i); }o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); }})//设置按钮样式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 = "自动";}else{st.Auto = true; st.Run(); this.value = "停止";}}$("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></html>
Tip: you can modify some code before running
