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代码
Mar 07 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
Jquery-data的三种用法
Apr 18 jQuery
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
js中生成map对象的方法
2014/01/09 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
教师实习自我鉴定
2013/12/18 职场文书
个人作风剖析材料
2014/02/02 职场文书
入职担保书怎么写
2014/05/12 职场文书
硕士学位论文评语
2014/12/31 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
windows安装python超详细图文教程
2021/05/21 Python