jQuery循環(huán)滾動展示代碼 可應用到文字和圖片上
更新時間：2012年05月11日 17:09:39 作者：
循環(huán)滾動展示的文字和圖片每個人都見過，實現(xiàn)類似效果的 JS 也很多。但如果只用于幾個條目或三五張圖片，體積龐大的 JS 會浪費資源
看見有的同學用 Adam Cai 的代碼，感覺稍顯復雜而且不夠 jQuery。我用只依靠 jQuery 入門的思路寫了一版，代碼更少使用也更簡單。
在線演示： 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]代碼
復制代碼 代碼如下:
$(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>
相關(guān)文章
jquery ajax學習筆記2 使用XMLHttpRequest對象的responseXML
使用XMLHttpRequest對象的responseXML的方式來接受XML數(shù)據(jù)對象的DOM對象2011-10-10
jQuery 創(chuàng)建Dom元素代碼，需要的朋友可以參考下。2010-05-05
jQuery實現(xiàn)仿微軟首頁感應鼠標變化滑動窗口效果
這篇文章主要介紹了jQuery實現(xiàn)仿微軟首頁感應鼠標變化滑動窗口效果,基于jQuery響應鼠標事件簡單實現(xiàn)動畫效果,非常簡單實用,需要的朋友可以參考下2015-10-10
工作不忙，閑來無事寫了一個彈出層插件，又需要的盡管拿去用啊有什么建議歡迎提出2009-10-10
jquery實現(xiàn)兩個div中的元素相互拖動的方法分析
這篇文章主要介紹了jquery實現(xiàn)兩個div中的元素相互拖動的方法,結(jié)合實例形式分析了jQuery基于鼠標事件響應的頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了基于jQuery下拉選擇框插件支持單選多選功能代碼的相關(guān)資料,需要的朋友可以參考下2016-06-06
本文將會使用jquery實現(xiàn)以下功能:按下方向鍵時，使層向相應的方向平滑移動20像素；四個方向鍵的鍵碼分別是37（左）、38（上）、39（右）和40（下）,感興趣的朋友可以了解下2013-01-01
遍歷每一行的同時一定要記住這里是gridviewrow不是datarow，找到這個選中項在執(zhí)行刪除2013-04-04
使用jquery實現(xiàn)鼠標滑過彈出更多相關(guān)信息層附源碼下載
當要在有限的空間展示更多的信息時，我們經(jīng)常會采取鼠標滑過彈出更多相關(guān)信息層，提高互動性。尤其可以應用在公司照片墻、招聘網(wǎng)站求職者信息展示等等場景，本文給大家分享使用jquery實現(xiàn)鼠標滑過彈出更多相關(guān)信息層附源碼下載，感興趣的朋友參考下2015-11-11
Jquery的Tabs內(nèi)容輪換效果實現(xiàn)代碼,幾行搞定
本篇文章主要是對Jquery的Tabs內(nèi)容輪換效果的實現(xiàn)代碼進行了介紹。幾行代碼輕松搞定2014-02-02