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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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
html中select语句读取mysql表中内容
2006/10/09 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python异常学习笔记
2015/02/03 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
企业口号大全
2014/06/12 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
党小组推荐意见
2015/06/02 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
简历自我评价范文
2019/04/24 职场文书