这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了原生 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 代码:
- /*
- * 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>
- */
参数:'wrapID':'xxxx',最外层的 ID 名 'scrollCount':5,滚动的数量
- *
- */
- //实例化
- new LGY_picSwitch({'wrapID':'gy_picSwitch','scrollCount':5});
是不是很方便的功能呢,使用也很简单,这里推荐给小伙伴,希望对大家能有所帮助
来源: http://www.phperz.com/article/17/0420/273396.html