知识大全 jQuery图片滚动图片的效果

Posted 2022-07-20 知

篇首语：我们要像海绵一样吸收有用的知识。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jQuery图片滚动图片的效果相关的知识，希望对你有一定的参考价值。

jQuery图片滚动图片的效果 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

这个效果是基于jQuery写的只是想纪念下自己的学习话不多说了贴代码代码如下: (function( $ ) var slider = function( elem args ) this config = $ extend( effect : x //效果水平 x speed : //动画速度 trigger : mouseenter //触发事件 callback : null // 回调函数 view : args || ); this history = [];//记录移动的历史记录 this index = ; this el = elem; this length = this el find( li ) length;//记录总长度 this width = this el find( li ) eq( ) outerWidth();//记录每一个单项的宽度 this init(); slider prototype = constructor : slider init : function() this bindEvents(); bindEvents : function() this prev(); this next(); prev : function() this el find( [data type=left] ) click( $ proxy(function() if( !this history length ) return;//如果记录为空证明没有进行移动过所以直接return this index ; var step = this history pop();//取最后的移动步骤 var move = step * this width;//算出移动宽度 this el find("ul") animate( "left" : "+="+move+"px" this config speed ) this)); next : function() this el find( [data type=right] ) click( $ proxy(function() //如果是当前的最后一页直接return if(this index == parseInt( this length / this config view ) ) return; this index++; //这个计算很重要 //计算 ( 下一页 * view ) 展示个数是否大于总长度 : 好比当前在第一页 ( + ) * > (总长度) //则this step 赋值为取余也就是剩下要移动的个数 if( this config view * (this index+ ) > this length ) this step = this length%this config view; else //否则移动展示的个数 this step = this config view; //记录移动的历史记录 this history push(this step); var move = * this step * this width; this el find("ul") animate( "left" : "+="+move+"px" this config speed ) this)); $ fn slider = function( args ) return this each(function() var el = this; var plugins = new slider( $( el ) args ); $(el) data("slider" plugins ); ); )(jQuery) 开始对这个实现没有好的想法本来想利用一个变量记录当前的移动个数的但是后面突然想到用数组来做这样子的处理顿时感觉清晰了这个的实现重点是一个记录移动步骤的数组向左移动的时候往数组里面push移动的步骤向右移动的时候从数组里面取最后一项 [] pop() 这样子很好的实现了需求做的比较粗糙麻烦各位大神提点意见 cha138/Article/program/Java/JSP/201311/20603