原生javascript实现图片按钮切换

　　function LGY_picSwitch(option){

　　this.oWrap = this.getId(option.wrapID); //最外层元素

　　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('li').length; //图片总数

　　this.nScollCount = option.scrollCount; //每次滚动的数量

　　this.nScollLen = Math.ceil(this.nLen/option.scrollCount); // 切换判断的最大值

　　this.nSwitchWidth = 0; //每次切换移动的距离，在代码里面动态获取值

　　this.nIndex = 0; //切换图片的当前索引

　　this.timer = null; //切换图片的引值

　　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.cssText += ';'+ 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(){

　　//动态获取移动的宽度

　　var oLi = this.oUl.getElementsByTagName('li')[0],

　　oLi_w = oLi.offsetWidth + parseInt(this.getCss(oLi,'marginLeft')) + parseInt(this.getCss(oLi,'marginRight'));

　　this.nSwitchWidth = oLi_w*this.nScollCount;

　　//按钮显示初始化

　　this.btnIsShow();

　　//左右切换

　　this.btnPrev();

　　this.btnNext();

　　}

　　}

　　/*

　　* HTML结构必需是以下：外层ID名，自己传入 如下面的：id="gy_picSwitch02" ，ID名，自己随便给

　　但，里面的结构必需一样，包括类名classname

　　<div id="gy_picSwitch02">

　　<span class="gy_picSwitch_prev"></span>

　　<span class="gy_picSwitch_next"></span>

　　<div class="gy_picSwitch_listWrap">

　　<ul>

　　<li><img src="images/pic01.jpg" alt=""></li>

　　<li><img src="images/pic02.jpg" alt=""></li>

　　<li><img src="images/pic03.jpg" alt=""></li>

　　<li><img src="images/pic04.jpg" alt=""></li>

　　<li><img src="images/pic05.jpg" alt=""></li>

　　<li><img src="images/pic06.jpg" alt=""></li>

　　<li><img src="images/pic07.jpg" alt=""></li>

　　<li><img src="images/pic08.jpg" alt=""></li>

　　</ul>

　　</div>

　　</div>

　　*

　　*/

　　//实例化

　　new LGY_picSwitch({'wrapID':'gy_picSwitch','scrollCount':5});