jcarousellite.js 基于Jquery的圖片無縫滾動(dòng)插件
更新時(shí)間：2010年12月30日 12:48:01 作者：
基于Jquery的圖片無縫滾動(dòng)插件，需要的朋友可以參考下。
1.引入JS庫(kù)，jquery.js腳本和插件腳本jcarousellite.js。
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>
2.需要被展現(xiàn)的HTML結(jié)構(gòu) div>ul>li>img ，結(jié)構(gòu)比較清晰
<div>
<ul>
<li><img src="1.jpg" alt="" width="100" height="100" ></li>
<li><img src="2.jpg" alt="" width="100" height="100" ></li>
<li><img src="3.jpg" alt="" width="100" height="100" ></li>
<li><img src="4.jpg" alt="" width="100" height="100" ></li>
</ul>
</div>
3.執(zhí)行啟動(dòng)腳本
$(function() {
$(".default .jCarouselLite").jCarouselLite({
btnNext: ".default .next",
btnPrev: ".default .prev"
});
});
官方網(wǎng)站演示：http://demo.jb51.net/js/jcarousellite2/index.htm
打包演示下載：http://chabaoo.cn/jiaoben/33787.html
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>
2.需要被展現(xiàn)的HTML結(jié)構(gòu) div>ul>li>img ，結(jié)構(gòu)比較清晰
復(fù)制代碼 代碼如下:
<div>
<ul>
<li><img src="1.jpg" alt="" width="100" height="100" ></li>
<li><img src="2.jpg" alt="" width="100" height="100" ></li>
<li><img src="3.jpg" alt="" width="100" height="100" ></li>
<li><img src="4.jpg" alt="" width="100" height="100" ></li>
</ul>
</div>
3.執(zhí)行啟動(dòng)腳本
復(fù)制代碼 代碼如下:
$(function() {
$(".default .jCarouselLite").jCarouselLite({
btnNext: ".default .next",
btnPrev: ".default .prev"
});
});
官方網(wǎng)站演示：http://demo.jb51.net/js/jcarousellite2/index.htm
打包演示下載：http://chabaoo.cn/jiaoben/33787.html
您可能感興趣的文章:
- Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動(dòng)條滾動(dòng)而滾動(dòng)
- jquery實(shí)現(xiàn)簡(jiǎn)單的無縫滾動(dòng)
- jquery無縫向上滾動(dòng)實(shí)現(xiàn)代碼
- 基于jQuery的圖片左右無縫滾動(dòng)插件
- jQuery插件scroll實(shí)現(xiàn)無縫滾動(dòng)效果
- jquery 文本上下無縫滾動(dòng),鼠標(biāo)放上去就停止 小例子
- jQuery動(dòng)畫效果實(shí)現(xiàn)圖片無縫連續(xù)滾動(dòng)
- jquery xMarquee實(shí)現(xiàn)文字水平無縫滾動(dòng)效果
- 基于jQuery的上下無縫滾動(dòng)應(yīng)用(單行或多行)
- jquery實(shí)現(xiàn)表格無縫滾動(dòng)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery元素選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
用JQuery 實(shí)現(xiàn)的自定義對(duì)話框
用JQuery 實(shí)現(xiàn)的自定義對(duì)話框...2007-03-03
jPlayer是一個(gè)JavaScript寫的完全免費(fèi)和開源的jQuery多媒體庫(kù)插件，這篇文章主要介紹了基于jPlayer三分屏的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jquery實(shí)現(xiàn)簡(jiǎn)單的無縫滾動(dòng)
這里給大家分享的是使用jQuery實(shí)現(xiàn)簡(jiǎn)單的無縫滾動(dòng)的效果，其思路是我們通過js控制 ul 標(biāo)簽的margin 來實(shí)現(xiàn)滾動(dòng)。橫向滾動(dòng)則是控制 margin-left ; 縱向滾動(dòng)則是控制 margin-top;，有需要的小伙伴可以參考下。2015-04-04
jQuery語法高亮插件能夠?qū)?yè)面中的各種程序源代碼語法著色加亮，并且支持多種語言，在此分享下，感興趣的朋友可以參考下2013-04-04
Juqery Html(),append()等方法的Bug解決方法
標(biāo)題中說是jquery中的Bug，只是個(gè)人這么認(rèn)為，先申明一下！2010-12-12
AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
這篇文章主要介紹了AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了封裝的jquery翻頁(yè)滾動(dòng)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
jQuery創(chuàng)建自己的插件(自定義插件)的方法
在該系列之前的文章使用 jQuery：UI 項(xiàng)目中，我介紹了使用 jQuery 代碼中的插件來提高 web 應(yīng)用程序的效率。2010-06-06
使用jquery讀取html5 localstorage的值的方法
在HTML 5中，localstorage是個(gè)不錯(cuò)的東西，在支持localstorage的瀏覽器中， 能持久化用戶表單的輸入，即使關(guān)掉瀏覽器，下次重新打開瀏覽器訪問，也能讀出其值,很不錯(cuò)的一個(gè)東西，接下來實(shí)例介紹，需要的朋友可以參考下2013-01-01