jQuery循環(huán)滾動(dòng)展示代碼 可應(yīng)用到文字和圖片上
更新時(shí)間：2012年05月11日 17:09:39 作者：
循環(huán)滾動(dòng)展示的文字和圖片每個(gè)人都見過(guò)，實(shí)現(xiàn)類似效果的 JS 也很多。但如果只用于幾個(gè)條目或三五張圖片，體積龐大的 JS 會(huì)浪費(fèi)資源
看見有的同學(xué)用 Adam Cai 的代碼，感覺稍顯復(fù)雜而且不夠 jQuery。我用只依靠 jQuery 入門的思路寫了一版，代碼更少使用也更簡(jiǎn)單。
在線演示： http://demo.jb51.net/js/2012/jquery_xhpic/
[JavaScript]代碼
$(document).ready(function(){
$("#sItem li:not(:first)").css("display","none");
var B=$("#sItem li:last");
var C=$("#sItem li:first");
setInterval(function(){
if(B.is(":visible")){
C.fadeIn(500).addClass("in");B.hide()
}else{
$("#sItem li:visible").addClass("in");
$("#sItem li.in").next().fadeIn(500);
$("li.in").hide().removeClass("in")}
},3000) //每3秒鐘切換一條，你可以根據(jù)需要更改
})
HTML 部分：
<ul id="sItem">
<li>文字或圖片</li>
<li>文字或圖片</li>
<li>文字或圖片</li>
</ul>
在線演示： http://demo.jb51.net/js/2012/jquery_xhpic/
[JavaScript]代碼
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("#sItem li:not(:first)").css("display","none");
var B=$("#sItem li:last");
var C=$("#sItem li:first");
setInterval(function(){
if(B.is(":visible")){
C.fadeIn(500).addClass("in");B.hide()
}else{
$("#sItem li:visible").addClass("in");
$("#sItem li.in").next().fadeIn(500);
$("li.in").hide().removeClass("in")}
},3000) //每3秒鐘切換一條，你可以根據(jù)需要更改
})
HTML 部分：
復(fù)制代碼 代碼如下:
<ul id="sItem">
<li>文字或圖片</li>
<li>文字或圖片</li>
<li>文字或圖片</li>
</ul>
您可能感興趣的文章:
- 多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼
- JQuery循環(huán)滾動(dòng)圖片代碼
- 利用jQuery簡(jiǎn)單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能(示例代碼)
- 基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動(dòng)
- 基于jQuery的圖片左右無(wú)縫滾動(dòng)插件
- jquery 單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼
- 基于jQuery圖片平滑連續(xù)滾動(dòng)插件
- js jquery做的圖片連續(xù)滾動(dòng)代碼
- jquery實(shí)現(xiàn)圖片左右間隔滾動(dòng)特效(可自動(dòng)播放)
- jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)
相關(guān)文章
jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對(duì)象的responseXML
使用XMLHttpRequest對(duì)象的responseXML的方式來(lái)接受XML數(shù)據(jù)對(duì)象的DOM對(duì)象2011-10-10
jQuery 創(chuàng)建Dom元素代碼，需要的朋友可以參考下。2010-05-05
jQuery實(shí)現(xiàn)仿微軟首頁(yè)感應(yīng)鼠標(biāo)變化滑動(dòng)窗口效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿微軟首頁(yè)感應(yīng)鼠標(biāo)變化滑動(dòng)窗口效果,基于jQuery響應(yīng)鼠標(biāo)事件簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10
工作不忙，閑來(lái)無(wú)事寫了一個(gè)彈出層插件，又需要的盡管拿去用啊有什么建議歡迎提出2009-10-10
jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法,結(jié)合實(shí)例形式分析了jQuery基于鼠標(biāo)事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了基于jQuery下拉選擇框插件支持單選多選功能代碼的相關(guān)資料,需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
本文將會(huì)使用jquery實(shí)現(xiàn)以下功能:按下方向鍵時(shí)，使層向相應(yīng)的方向平滑移動(dòng)20像素；四個(gè)方向鍵的鍵碼分別是37（左）、38（上）、39（右）和40（下）,感興趣的朋友可以了解下2013-01-01
遍歷每一行的同時(shí)一定要記住這里是gridviewrow不是datarow，找到這個(gè)選中項(xiàng)在執(zhí)行刪除2013-04-04
使用jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出更多相關(guān)信息層附源碼下載
當(dāng)要在有限的空間展示更多的信息時(shí)，我們經(jīng)常會(huì)采取鼠標(biāo)滑過(guò)彈出更多相關(guān)信息層，提高互動(dòng)性。尤其可以應(yīng)用在公司照片墻、招聘網(wǎng)站求職者信息展示等等場(chǎng)景，本文給大家分享使用jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出更多相關(guān)信息層附源碼下載，感興趣的朋友參考下2015-11-11
Jquery的Tabs內(nèi)容輪換效果實(shí)現(xiàn)代碼,幾行搞定
本篇文章主要是對(duì)Jquery的Tabs內(nèi)容輪換效果的實(shí)現(xiàn)代碼進(jìn)行了介紹。幾行代碼輕松搞定2014-02-02