先给大家看看效果展示。

以下是详细代码：

复制代码代码如下：功能LGY _ picSwitch(选项){这个。owrap=这个。getid(选项。wraid)；//最外层元素这个。olistwrap=这个。getnodebyclassname(这。owrap，' gy _ picSwitch _ list warp ')[0]；这个。oul=这个。奥利斯特拉普。getelementsbytagname(' ul ')[0]；这个。obtnprev=this。getnodebyclassname(这。owrap，' gy _ picSwitch _ prev ')[0]；这个。obtnext=这个。getnodebyclassname(这。owrap，' gy _ picSwitch _ next ')[0]；这个。nLEn=这个。OUl。GetElementsBytagname(' Li ').长度；//图片总数这个。nscollcount=选项。滚动计数；//每次滚动的数量这个。nscolllen=数学。天花板(这个。nlen/选项。滚动计数)；//切换判断的最大值这个。nswitchwidth=0；//每次切换移动的距离，在代码里面动态获取值这个。nin dex=0；//切换图片的当前索引this.timer=null/切换图片的引值这个。int()；} LGY _ picswitch。原型={ getid :函数(id){返回文档。getelementbyid(id)；}，getnodebyclassname :函数(父，类名){ var类元素=new Array()；var els=父级。getelementsbytagname(' * ')；新RegExp('(^|\s)'类名( s | $)；对于(i=0，j=0；I elsLeni){ if(pattern . test(els[I]).CLaSS name)){ CLaSS ElEMENTs[j]=els[I]；j；} }返回classElements}，getCss:function(节点，值){ return node.currentStyle？节点。current style[value]: getcomputed style(node，null)[value]；}，setCss:function(node，val){ for(var v in val){ node。风格。CSS文本=“；”v ' : ' val[v]；} }，moveFn:function(节点、值、目标值、回调){ var _ that=this clearinterval(this。计时器)；这个。timer=setInterval(function(){ var val=parseFloat(_)即。getcss(节点，值))；var speed=(TargetValue-val)/8；速度=速度0?Math.ceil(速度):路径。地板(速度);if(speed==0){ clearInterval(_)那。计时器)；callbackcallback()；} else { node。style[value]=(val speed)' px '；} },20);}，picchange : function(){ this。移动fn(这个。欧尔，‘margin left’，-这个。这个。nswitchwidth)；}，可取消的：函数(e){ e . stopper management？e . stopperpabogation(): e . cancelable=true；}，btnisshow :函数(){ this。setcss(这。obtnext，{ ' display ' : ' block ' })；this.setCss(this.oBtnPrev，{ ' display ' : ' block ' })；如果(这个。nindex==0)这一点。setcss(这。obtnprev，{ ' display ' : ' none ' })；如果(这个。nindex==(这个。这。setcss(这。obtnext，{ ' display ' : ' none ' })；}，btnprev : FuncTion(){ var _ that=this；这个。obtnprev。onclick=function(e){ var e=e | | window。事件；_那个。可取消(e)；if(_that.nIndex！=0){ _ that。nin dex-；_那个。picchange()；_那个。btnisshow()；} } }，btnnext : FuncTion(){ var _ that=this；这个。OBNNExt。onclick=function(e){ var e=e | | window。事件；_那个。可取消(e)；if(_that.nIndex！=(_那个。nscolllen-1)){ _那。nindex_那个。picchange()；_那个。btnisshow()；} } }，int:function(){ //动态获取移动的宽度var OLi=这个。乌尔。getelementsbytagname(' Li ')[0]，OLi _ w=OLi。offsetwithts parsent(这。getcss(OLi，‘左边距’))parsent(这个。getcss(OLi，‘右边距’)；这个。nswitchwidth=OLi _ w * this。nscollcount//按钮显示初始化这个。btnisshow()；//左右切换这个。btnprev()；这个。btnnext()；}}HTML代码：复制代码代码如下：/** HTML结构必需是以下：外层身份名，自己传入如下面的：id='gy_picSwitch02 '，id名，自己随便给但，里面的结构必需一样，包括类名类名div id=' gy _ pic switch 02 ' span=' gy _ pic switch _ prev '/span class=' gy _ pic switch _ next '/span div=' gy _ pic switch _ list WAP ' ul liimg src=' http : images/pic 01。jpg ' alt=' '/Li liimg src=' http : images/pic 02。jpg ' alt=' '/Li liimg src=' http : images/pic 03 .

参数：“wraid”:“xxxx”，最外面的ID名称“scroll count”:5，滚动数。

复制代码如下： **///实例化新lgy _ pic switch({ ' wrap id ' : ' gy _ pic switch '，' roll count ' :5 })；

是不是一个很方便的功能，而且使用起来很简单？推荐给这里的朋友，希望对大家有所帮助。