jQuery图片滚动图片的效果(另类实现)


Posted in Javascript onJune 02, 2013

需求 : 图片切换的时候下一屏不允许出现空白的项,换句话说就是 :

1、当移动的最后一屏移动的个数小于要展示的个数的时候 ,只移动(展示个数-最后一屏的个数的)差值。 举个例子: 每一屏都要展示7个,但总个数才10个,滚动到下一屏时候用户看到的还是7个,这个时候需要移动的是三个

这个效果是基于jQuery写的,只是想纪念下自己的学习 话不多说了,贴代码

(function( $ ){
     var slider = function( elem , args ){
         this.config = $.extend({
             effect   : 'x', //效果  水平 - x
             speed    : 600 , //动画速度
             trigger  : 'mouseenter', //触发事件
             callback : null , // 回调函数
             view     : 7 
         }, args || {}  );         this.history = [];//记录移动的历史记录
         this.index = 0;
         this.el = elem;
         this.length = this.el.find('li').length;//记录总长度
         this.width = this.el.find('li').eq(0).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 , 10 ) ){
                     return;
                 }
                 this.index++;
                 //这个计算很重要
                 //计算 ( 下一页 * view ) 展示个数是否大于总长度 : 好比当前在第一页 (1+1) *7 > 12(总长度)
                 //则this.step 赋值为取余 ,也就是剩下要移动的个数
                 if( this.config.view * (this.index+1) > this.length ){
                     this.step =  this.length%this.config.view;
                 }else{
                     //否则移动展示的个数
                     this.step = this.config.view;
                 }
                 //记录移动的历史记录
                 this.history.push(this.step);
                 var move = -1 * 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()。

这样子很好的实现了需求,做的比较粗糙,麻烦各位大神提点意见

Javascript 相关文章推荐
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
如何用JS实现简单的数据监听
May 06 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 #Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 #Javascript
js内存泄露的几种情况详细探讨
May 31 #Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 #Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 #Javascript
js 输出内容到新窗口具体实现代码
May 31 #Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 #Javascript
You might like
77A一级收信机修理记
2021/03/02 无线电
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
Python之读取TXT文件的方法小结
2018/04/27 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
教导主任竞聘演讲稿
2014/05/16 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2016年端午节寄语
2015/12/04 职场文书
小学记事作文之200字
2019/08/06 职场文书