视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery图片滚动图片的效果(另类实现)_jquery
2020-11-27 21:09: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--;
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()。

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

下载本文
显示全文
专题