首頁 web前端 js教程 基于jQuery的图片左右无缝滚动插件_jquery

基于jQuery的图片左右无缝滚动插件_jquery

May 16, 2016 pm 05:53 PM
無縫捲動

在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/
打包下载:http://www.jb51.net/jiaoben/44973.html
核心代码:

复制代码 代码如下:

(function($){
$.fn.extend({
"slidelf":function(value){
value = $.extend({
"prev":"",
"next":"",
"speed":""
},value)
var dom_this = $(this).get(0); //将jquery对象转换成DOM对象;以便其它函数中调用;
var marginl = parseInt($("ul li:first",this).css("margin-left")); //每个图片margin的数值
var movew = $("ul li:first",this).outerWidth()+marginl; //需要滑动的数值
//左边的动画
function leftani(){
$("ul li:first",dom_this).animate({"margin-left":-movew},value.speed,function(){
$(this).css("margin-left",marginl).appendTo($("ul",dom_this));
});
}
//右边的动画
function rightani(){
$("ul li:last",dom_this).prependTo($("ul",dom_this));
$("ul li:first",dom_this).css("margin-left",-movew).animate({"margin-left":marginl},value.speed);
}
//点击左边
$("."+value.prev).click(function(){
if(!$("ul li:first",dom_this).is(":animated")){
leftani();
}
});
//点击左边
$("."+value.next).click(function(){
if(!$("ul li:first",dom_this).is(":animated")){
rightani();
}
})
}
});
})(jQuery)

思路:
  点击左边--
  1.将第一个LI向左滑动,滑动的数值就是LI的宽度。(这里是用负margin-left来实现移动。)
  2.滑动完成后,将这个LI插入到整个LI的最后一个(实现无缝滚动)
  点击右边--
  1.将最后一个LI插入到所有LI的第一个,并将其定位到可见区域之外,(这里用的是margin)
  2.再将其滑动到可见区域。
注意:这里的IF判断语句,是为了防止连续点击“左”或“右”的铵钮,而出现的BUG;
  这判断的意思:只有当LI不处于动画状态时,才执行移动函数。只要处于动画状态,点击时,任何事都不发生。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

CSS實現無縫滾動效果的技巧和方法 CSS實現無縫滾動效果的技巧和方法 Oct 25, 2023 pm 12:31 PM

CSS實現無縫滾動效果的技巧和方法,需要具體程式碼範例隨著網路技術的發展,無縫滾動效果在網頁設計中被廣泛應用。它可以帶給使用者更好的瀏覽體驗,也能增加網頁的動態和視覺效果。在本文中,我將介紹幾種常用的CSS實現無縫滾動效果的技巧和方法,並提供具體的程式碼範例。使用CSS動畫實現無縫滾動效果CSS動畫是實現無縫滾動效果的簡單且高效的方法。我們可以使用@key

如何使用CSS製作無縫滾動的文字輪播的效果 如何使用CSS製作無縫滾動的文字輪播的效果 Oct 25, 2023 am 10:24 AM

如何使用CSS製作無縫滾動的文字輪播的效果,需要具體程式碼範例隨著網路的發展和設計人員對使用者體驗的要求不斷提高,網站上的文字輪播效果已經成為常見的展示形式之一。文字輪播能吸引使用者的目光,增加頁面的動態與活力,提升使用者對內容的關注。在本文中,我將向大家介紹如何使用CSS製作一個無縫滾動的文字輪播效果,並提供具體的程式碼範例。在製作無縫滾動的文字輪播效果之前,我

如何使用Vue實現無縫滾動廣告特效 如何使用Vue實現無縫滾動廣告特效 Sep 21, 2023 am 11:24 AM

如何使用Vue實現無縫滾動廣告特效在現代的網頁設計中,無縫滾動廣告特效已經變得非常流行。這種特效能夠吸引用戶的注意力,同時展示多個廣告內容。 Vue是一個流行的JavaScript框架,它提供了簡單而可靠的方式來實現這種特效。本文將向你展示如何使用Vue來創建一個無縫滾動廣告效果,並提供具體的程式碼範例。第一步:建立Vue元件首先,我們需要建立一個Vue元件來實

如何透過純CSS實現無縫滾動新聞的方法和技巧 如何透過純CSS實現無縫滾動新聞的方法和技巧 Oct 19, 2023 am 10:46 AM

如何透過純CSS實現無縫滾動新聞的方法和技巧隨著Web技術的不斷發展,如何透過CSS實現一些酷炫的效果成為了前端開發者們的追求。本文將介紹如何透過純CSS實現無縫滾動新聞的方法和技巧,並提供具體的程式碼範例。一、實現思路無縫滾動新聞效果的實現思路一般有兩種:使用CSS動畫和使用CSS3的transform屬性。以下我們將逐一介紹這兩種方法。 1.使用CSS動畫C

如何使用CSS製作無縫滾動的圖片輪播的效果 如何使用CSS製作無縫滾動的圖片輪播的效果 Oct 20, 2023 pm 03:37 PM

如何使用CSS製作無縫滾動的圖片輪播效果隨著互聯網的發展和人們對美觀性的追求,圖片輪播已經成為網頁設計中常見的元素之一。無縫滾動的圖片輪播效果能夠吸引使用者的注意力,增加頁面的互動性和視覺效果。在本文中,我們將介紹如何使用CSS來實現無縫滾動的圖片輪播效果,並提供具體的程式碼範例。首先,我們需要準備一些基本的HTML結構。我們可以使用一個包含多個圖片的容器,並使

如何使用CSS製作無縫滾動的文字展示效果的實現步驟 如何使用CSS製作無縫滾動的文字展示效果的實現步驟 Oct 21, 2023 am 09:10 AM

如何使用CSS製作無縫滾動的文字展示效果的實現步驟在網頁設計中,無縫滾動的文字展示效果給人們帶來了更加流暢和吸引人的用戶體驗。這種效果通常用於輪播圖、滾動新聞等場景。本文將介紹一種使用CSS實現無縫滾動的文字展示效果的具體步驟,並提供相關的程式碼範例。步驟一:建立HTML結構首先,我們需要建立一個包含滾動文字的容器元素。可以是div、ul或其他的HTM

如何使用CSS製作無縫捲動的圖片展示欄的效果 如何使用CSS製作無縫捲動的圖片展示欄的效果 Oct 16, 2023 am 08:09 AM

如何使用CSS製作無縫滾動的圖片展示欄的效果隨著互聯網的發展,圖片展示成為了許多網站設計中必不可少的一部分。而無縫滾動的圖片展示欄效果,更是能吸引使用者目光,提升網站的視覺效果與使用者體驗。在本文中,我將向您介紹如何使用CSS來實現無縫滾動的圖片展示欄效果,並提供具體的程式碼範例。實現無縫滾動的圖片展示欄效果主要依賴CSS的動畫屬性和佈局。下面是實現該效果的步

如何使用HTML、CSS和jQuery實現無縫滾動的新聞通知 如何使用HTML、CSS和jQuery實現無縫滾動的新聞通知 Oct 25, 2023 am 11:55 AM

如何使用HTML、CSS和jQuery實現無縫滾動的新聞通知在當今資訊爆炸的時代,新聞通知成為人們獲取即時資訊的重要途徑之一。網頁上的新聞通知欄能夠吸引使用者的注意力,並提供重要且令人感興趣的內容。本文將介紹如何使用HTML、CSS和jQuery來實現一個無縫滾動的新聞通知欄,並附帶具體程式碼範例。一、HTML結構:在HTML檔案中,我們首先需要建立一個包含新聞

See all articles