當移動的最後一屏移動的個數小於要展示的個數的時候 只移動(展示個數最後一屏的個數的)差值 舉個例子 每一屏都要展示個但總個數才個滾動到下一屏時候用戶看到的還是個這個時候需要移動的是三個
這個效果是基於jQuery寫的
只是想紀念下自己的學習 話不多說了
貼代碼
代碼如下:
(function( $ ){
var slider = function( elem
args ){
this
config = $
extend({
effect :
x
//效果 水平
x
speed :
//動畫速度
trigger :
mouseenter
//觸發事件
callback : null
// 回調函數
view :
}
args || {} );
this
history = [];//記錄移動的歷史記錄
this
index =
;
this
el = elem;
this
length = this
el
find(
li
)
length;//記錄總長度
this
width = this
el
find(
li
)
eq(
)
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
) ){
return;
}
this
index++;
//這個計算很重要
//計算 ( 下一頁 * view ) 展示個數是否大於總長度 : 好比當前在第一頁 (
+
) *
>
(總長度)
//則this
step 賦值為取余
也就是剩下要移動的個數
if( this
config
view * (this
index+
) > this
length ){
this
step = this
length%this
config
view;
}else{
//否則移動展示的個數
this
step = this
config
view;
}
//記錄移動的歷史記錄
this
history
push(this
step);
var move =
* 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()
這樣子很好的實現了需求
做的比較粗糙
麻煩各位大神提點意見
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20603.html
