首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:38:54
字体:
来源:转载
供稿:网友

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

  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--;

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选