Label rotation, Label Switching JS implementation
Javascript language: CRM <SCRIPT type = "text/JavaScript">
// Boxid container ID boxheight container height and label content height
// Tabsid tag button container ID inaction false
// Tabson current tag item
// Times automatic rotation time
// E event true: onmouseover false: onclick
VaR ztshow = function (boxid, boxheight, tabsid, tabson, times, e ){
VaR getnodelist = function (nodelist) {// get the number of points under the tag
VaR new = []; var n = 0;
For (VAR I = 0; I <nodelist. length; ++ I) {If (nodelist [I]. nodetype = 1) {n ++; new. push (nodelist [I]); nodelist [I]. setattribute ("num", n );}}
Return new;
}
VaR $ = function (ID) {return document. getelementbyid (ID);} // defines the ID queryer;
If (tabsid) {VaR as = getnodelist ($ (tabsid). childnodes); As [0]. classname = tabson ;}
If (boxid) {var IMGs = getnodelist ($ (boxid). childnodes);} // retrieves an array of Rotated Images;
VaR tabskey = true; // defines the switch for timed rotation of keys;
VaR tabsnum = 0; // defines the coordinates of the current rotation array;
If (tabsid ){
For (VAR I = 0; I <as. length; I ++ ){
As [I] [E? "Onmouseover": "onclick"] = function (e ){
Tabskey = false;
If (boxid) {IMGs [0]. style. margintop = "-" + (this. attributes ["num"]. nodevalue-1) * boxheight) + "PX ";}
For (var ii = 0; II <as. length; II ++) {as [II]. classname = "" ;}; this. classname = tabson;
Tabsnum = This. attributes ["num"]. nodevalue-1;
}
}
}
If (boxid ){
For (VAR I = 0; I IMGs [I]. onmouseover = function () {tabskey = false ;}
IMGs [I]. onmouseout = as [I]. onmouseout = function () {tabskey = true ;}
}
}
If (times! = 0 ){
This. setinterval (function (){
If (tabskey ){
If (tabsid) {for (VAR I = 0; I <. length; I ++) {as [I]. classname = "" ;}; as [tabsnum]. classname = tabson };
If (boxid) {IMGs [0]. style. margintop = "-" + (tabsnum) * boxheight) + "PX ";}
Tabsnum ++;
If (tabsnum = IMGs. Length) {tabsnum = 0 ;}
}
}, Times );
}
}
Window. onload = function (){
Ztshow ("imgbox", 308, "tabbox", "tabson", 2000, true );
Ztshow (false, 0, "onon", "on", 0, true );
Ztshow (false, 0, "thegood", "on", 0, true );
}
</SCRIPT>
The final result is as follows: |
|
|
|
|
|
|
|
|