Use native javascript to implement image button Switching
This article mainly introduces how to implement image button switching using native javascript. For more information, see
Let's take a look at the effect chart.
The following code details:
The Code is as follows:
Function LGY_picSwitch (option ){
This. oWrap = this. getId (option. wrapID); // outermost Element
This. olistWrap = this. getNodeByClassname (this. oWrap, 'gy _ picSwitch_listWrap ') [0];
This. oUl = this. olistWrap. getElementsByTagName ('ul ') [0];
This. oBtnPrev = this. getNodeByClassname (this. oWrap, 'gy _ picSwitch_prev ') [0];
This. oBtnNext = this. getNodeByClassname (this. oWrap, 'gy _ picSwitch_next ') [0];
This. nLen = this. oUl. getElementsByTagName ('lil'). length; // total number of images
This. nScollCount = option. scrollCount; // the number of times each scroll occurs.
This. nScollLen = Math. ceil (this. nLen/option. scrollCount); // the maximum value of the switchover judgment
This. nSwitchWidth = 0; // the distance between each switchover and movement. The value is dynamically obtained in the code.
This. nIndex = 0; // switch the current index of the image
This. timer = null; // switch the image reference value
This.int ();
}
LGY_picSwitch.prototype = {
GetId: function (id ){
Return document. getElementById (id );
},
GetNodeByClassname: function (parent, classname ){
Var classElements = new Array ();
Var els = parent. getElementsByTagName ('*');
Var elsLen = els. length;
Var pattern = new RegExp ("(^ | \ s)" + classname + "(\ s | $ )");
For (I = 0, j = 0; I <elsLen; I ++ ){
If (pattern. test (els [I]. className )){
ClassElements [j] = els [I];
J ++;
}
}
Return classElements;
},
GetCss: function (node, value)
{
Return node. currentStyle? Node. currentStyle [value]: getComputedStyle (node, null) [value];
},
SetCss: function (node, val ){
For (var v in val ){
Node.style.css Text + = ';' + v + ':' + val [v];
}
},
MoveFn: function (node, value, targetValue, callback ){
Var _ that = this;
ClearInterval (this. timer );
This. timer = setInterval (function ()
{
Var val = parseFloat (_ that. getCss (node, value ));
Var speed = (targetValue-val)/8;
Speed = speed> 0? Math. ceil (speed): Math. floor (speed );
If (speed = 0)
{
ClearInterval (_ that. timer );
Callback & callback ();
}
Else
{
Node. style [value] = (val + speed) + 'px ';
}
}, 20 );
},
PicChange: function (){
This. moveFn (this. oUl, 'marginleft',-this. nIndex * this. nSwitchWidth );
},
CancelBubble: function (e ){
E. stopPropagation? E. stopPropagation (): e. cancelBubble = true;
},
BtnIsShow: function (){
This. setCss (this. oBtnNext, {'display': 'block '});
This. setCss (this. oBtnPrev, {'display': 'block '});
If (this. nIndex = 0) this. setCss (this. oBtnPrev, {'display': 'none '});
If (this. nIndex = (this. nScollLen-1) this. setCss (this. oBtnNext, {'display': 'none '});
},
BtnPrev: function (){
Var _ that = this;
This. oBtnPrev. onclick = function (e ){
Var e = e | window. event;
_ That. cancelBubble (e );
If (_ that. nIndex! = 0 ){
_ That. nIndex --;
_ That. picChange ();
_ That. btnIsShow ();
}
}
},
BtnNext: function (){
Var _ that = this;
This. oBtnNext. onclick = function (e ){
Var e = e | window. event;
_ That. cancelBubble (e );
If (_ that. nIndex! = (_ That. nScollLen-1 )){
_ That. nIndex ++;
_ That. picChange ();
_ That. btnIsShow ();
}
}
},
Int: function (){
// Dynamically Retrieve the moving width
Var oLi = this. oUl. getElementsByTagName ('lil') [0],
OLi_w = oLi. offsetWidth + parseInt (this. getCss (oLi, 'marginleft') + parseInt (this. getCss (oLi, 'marginright '));
This. nSwitchWidth = oLi_w * this. nScollCount;
// Button display Initialization
This. btnIsShow ();
// Switch between left and right
This. btnPrev ();
This. btnNext ();
}
}
HTML code:
The Code is as follows:
/*
* The HTML structure must be the following: the outer ID name. input the following information: id = "gy_picSwitch02", ID name.
However, the structure must be the same, including the class name classname.
<Div id = "gy_picSwitch02">
<Span class = "gy_picSwitch_prev"> </span>
<Span class = "gy_picSwitch_next"> </span>
<Div class = "gy_picSwitch_listWrap">
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>
</Div>
Parameter: 'wrapid': 'xxxx', ID of the outermost layer
'Rollcount': 5, Number of scrolls
The Code is as follows:
*
*/
// Instantiate
New LGY_picSwitch ({'wrapid': 'gy _ picswitch', 'rollcount': 5 });
Is it a convenient function and easy to use? We recommend it to our friends here, hoping to help you.
