<! DOCTYPE html>
/* Perfect Motion frame */function Move (OBJ,JSON,FN) {//prevents multiple clicks from closing off the previous timer clearinterval (Obj.timer); Turn on timer Obj.timer: Prevent multiple objects from grabbing the timer Obj.timer = setinterval (function () {//open-close var bstop = true; The incoming object needs to traverse all the values in the object for the (Var attr in JSON) {/* Because the limitation of offset is too large, if you want this method to be flexible and use only to get non-inline styles Consider the 2 point 1, the transparency is the decimal can not be directly rounded needs first *100 in rounding 2, because GetStyle () is obtained by the string we need to convert it to a number */var icur = 0; if (attr = = "Opacity") {icur = parseint (GetStyle (obj,attr) *100); }else{icur = parseint (GetStyle (obj,attr)); }/* Because you want to do the cache motion, you need to calculate the speed is an indeterminate formula: (target value-the position of the current object)/factor recommendations are 8 considerations: There is a problem with the computer processing the decimal, so we need to take the decimal, we need to take the rounding up and rounding down *//calculate the speed var = (json[attr]-icur)/8; Speed = speed>0? Math.ceil (Speed): Math.floor (speed); /* Determine if you have reached the end onlyTo have a failure to reach the end of the bstop will be false after the completion of the loop to determine bstop to decide to close the timer */if (Json[attr]!=icur) {bstop = false; }/* Consider 2 parts 1, transparency is not required to add PX and therefore need to be judged separately 2, ordinary properties are required to add PX so need to judge again */if (attr = = "opacity") {//Transparency compatibility obj.style.opacity = (icur+speed) /100; Obj.style.filter = "Alpha (opacity:" + (Icur+speed) + ")"; }else{obj.style[attr] = (icur+speed) + "px"; }}//When the loop is complete, determine the state of the bstop to determine whether to turn off the timer if (bstop) {clearinterval (Obj.timer); Chain-operated FN&&FN (); }},30)}
<! DOCTYPE html>
JS Seamless carousel and fade-out carousel