jQuery圖片滾動(dòng)圖片的效果(另類(lèi)實(shí)現(xiàn))
需求 : 圖片切換的時(shí)候下一屏不允許出現(xiàn)空白的項(xiàng),換句話說(shuō)就是 :
1、當(dāng)移動(dòng)的最后一屏移動(dòng)的個(gè)數(shù)小于要展示的個(gè)數(shù)的時(shí)候 ,只移動(dòng)(展示個(gè)數(shù)-最后一屏的個(gè)數(shù)的)差值。 舉個(gè)例子: 每一屏都要展示7個(gè),但總個(gè)數(shù)才10個(gè),滾動(dòng)到下一屏?xí)r候用戶看到的還是7個(gè),這個(gè)時(shí)候需要移動(dòng)的是三個(gè)
這個(gè)效果是基于jQuery寫(xiě)的,只是想紀(jì)念下自己的學(xué)習(xí) 話不多說(shuō)了,貼代碼
(function( $ ){
var slider = function( elem , args ){
this.config = $.extend({
effect : 'x', //效果 水平 - x
speed : 600 , //動(dòng)畫(huà)速度
trigger : 'mouseenter', //觸發(fā)事件
callback : null , // 回調(diào)函數(shù)
view : 7
}, args || {} );
this.history = [];//記錄移動(dòng)的歷史記錄
this.index = 0;
this.el = elem;
this.length = this.el.find('li').length;//記錄總長(zhǎng)度
this.width = this.el.find('li').eq(0).outerWidth();//記錄每一個(gè)單項(xiàng)的寬度
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;//如果記錄為空,證明沒(méi)有進(jìn)行移動(dòng)過(guò),所以直接return
this.index--;
var step = this.history.pop();//取最后的移動(dòng)步驟
var move = step * this.width;//算出移動(dòng)寬度
this.el.find("ul").animate( { "left" : "+="+move+"px" } , this.config.speed )
} , this));
},
next : function(){
this.el.find('[data-type="right"]').click( $.proxy(function(){
//如果是當(dāng)前的最后一頁(yè),直接return
if(this.index == parseInt( this.length / this.config.view , 10 ) ){
return;
}
this.index++;
//這個(gè)計(jì)算很重要
//計(jì)算 ( 下一頁(yè) * view ) 展示個(gè)數(shù)是否大于總長(zhǎng)度 : 好比當(dāng)前在第一頁(yè) (1+1) *7 > 12(總長(zhǎng)度)
//則this.step 賦值為取余 ,也就是剩下要移動(dòng)的個(gè)數(shù)
if( this.config.view * (this.index+1) > this.length ){
this.step = this.length%this.config.view;
}else{
//否則移動(dòng)展示的個(gè)數(shù)
this.step = this.config.view;
}
//記錄移動(dòng)的歷史記錄
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)
開(kāi)始對(duì)這個(gè)實(shí)現(xiàn)沒(méi)有好的想法,本來(lái)想利用一個(gè)變量記錄當(dāng)前的移動(dòng)個(gè)數(shù)的,但是后面突然想到用數(shù)組來(lái)做這樣子的處理,頓時(shí)感覺(jué)清晰了。
這個(gè)的實(shí)現(xiàn)重點(diǎn)是一個(gè)記錄移動(dòng)步驟的數(shù)組。向左移動(dòng)的時(shí)候往數(shù)組里面push移動(dòng)的步驟,向右移動(dòng)的時(shí)候,從數(shù)組里面取最后一項(xiàng) [].pop()。
這樣子很好的實(shí)現(xiàn)了需求,做的比較粗糙,麻煩各位大神提點(diǎn)意見(jiàn)
- jquery圖片滾動(dòng)放大代碼分享(2)
- jquery圖片滾動(dòng)放大代碼分享(1)
- jquery實(shí)現(xiàn)多行文字圖片滾動(dòng)效果示例代碼
- 一個(gè)jquery實(shí)現(xiàn)的不錯(cuò)的多行文字圖片滾動(dòng)效果
- JQuery 圖片滾動(dòng)輪播示例代碼
- jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡(jiǎn)單實(shí)例
- jQuery bxCarousel實(shí)現(xiàn)圖片滾動(dòng)切換效果示例代碼
- Jquery圖片滾動(dòng)與幻燈片的實(shí)例代碼
- jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)
- jquery實(shí)現(xiàn)圖片平滑滾動(dòng)詳解
相關(guān)文章
Jquery實(shí)現(xiàn)列表(隔行換色,全選,鼠標(biāo)滑過(guò)當(dāng)前行)效果實(shí)例
Jquery實(shí)現(xiàn)列表(隔行換色,全選,鼠標(biāo)滑過(guò)當(dāng)前行)效果實(shí)例,需要的朋友可以參考一下2013-06-06
使用jQuery獲取所有標(biāo)簽的實(shí)現(xiàn)代碼
在前端開(kāi)發(fā)中,使用jQuery能夠方便地操作DOM元素,有時(shí)候我們需要獲取頁(yè)面上所有的HTML標(biāo)簽,可以通過(guò)jQuery來(lái)實(shí)現(xiàn),本文將介紹如何使用jQuery獲取所有的標(biāo)簽,并展示一個(gè)簡(jiǎn)單的示例代碼,需要的朋友可以參考下2024-09-09
jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解
這篇文章主要介紹了jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解,需要的朋友可以參考下2014-12-12
jQuery獲取單選按鈕radio選中值與去除所有radio選中狀態(tài)的方法
下面小編就為大家?guī)?lái)一篇jQuery獲取單選按鈕radio選中值與去除所有radio選中狀態(tài)的方法。2017-05-05
jquery配合css簡(jiǎn)單實(shí)現(xiàn)返回頂部效果
返回頂部效果想必大家并不陌生吧,其實(shí)實(shí)現(xiàn)方法有很多,在本文為大家介紹下使用jquery是如何輕易實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-09-09
使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁(yè)面新數(shù)據(jù)
這篇文章主要介紹了使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁(yè)面新數(shù)據(jù)的方法,即控制滾動(dòng)條下拉時(shí)的加載事件,需要的朋友可以參考下2016-03-03
jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼
這篇文章主要介紹了jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
基于jQuery實(shí)現(xiàn)選取月份插件附源碼下載
這是一個(gè)基于jQuery的可以選擇年份和月份的月份拾取插件,你可以設(shè)置點(diǎn)擊頁(yè)面上的任意元素觸發(fā)彈出年月選擇面板,可以是一個(gè)鏈接也可以是一個(gè)輸入框,廣泛應(yīng)用于月份查詢,而無(wú)需設(shè)置select表單。2015-12-12

