jQuery循環(huán)滾動展示代碼 可應(yīng)用到文字和圖片上
更新時間：2012年05月11日 17:09:39 作者：
循環(huán)滾動展示的文字和圖片每個人都見過，實現(xiàn)類似效果的 JS 也很多。但如果只用于幾個條目或三五張圖片，體積龐大的 JS 會浪費資源
看見有的同學(xué)用 Adam Cai 的代碼，感覺稍顯復(fù)雜而且不夠 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]代碼
復(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>
相關(guān)文章
基于jQuery UI CSS Framework開發(fā)Widget的經(jīng)驗
jQuery UI CSS Framework是jQuery UI中的一個樣式框架，可以利用jQuery Theme roller 來生成自己想要的css樣式效果。我們可以利用jQuery UI的一些框架來開發(fā)出基于jQuery UI CSS Framework效果的插件來。2010-08-08
基于jQuery.i18n實現(xiàn)web前端的國際化
這篇文章主要介紹了基于jQuery.i18n實現(xiàn)web前端的國際化，具有很好的參考價值，希望對大家有所幫助2018-05-05
jQuery EasyUI API 中文幫助文檔和擴(kuò)展實例
這篇文章主要介紹了jQuery EasyUI API 中文幫助文檔和擴(kuò)展實例 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
jQuery實現(xiàn)鼠標(biāo)拖動div改變位置、大小的實踐
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)拖動div改變位置、大小的實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
jQuery實現(xiàn)表格隔行及滑動,點擊時變色的方法【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)表格隔行及滑動,點擊時變色的方法,可實現(xiàn)表格隔行變色以及鼠標(biāo)滑過與點擊時變色的功能,涉及jQuery響應(yīng)鼠標(biāo)事件及頁面元素樣式動態(tài)改變的相關(guān)技巧,需要的朋友可以參考下2016-08-08
jquery和css3實現(xiàn)的炫酷時尚的菜單導(dǎo)航
點擊列表圖表后，內(nèi)容頁面向內(nèi)移動顯示菜單項。當(dāng)單擊關(guān)閉菜單按鈕時，菜單項隱藏，內(nèi)容頁恢復(fù)原位2014-09-09
這篇文章主要介紹了jquery.post用法之type設(shè)置問題,需要的朋友可以參考下2014-02-02
jQuery on()綁定動態(tài)元素出現(xiàn)的問題小結(jié)
jQuery on()方法是官方推薦的綁定事件的一個方法。使用 on() 方法可以給將來動態(tài)創(chuàng)建的動態(tài)元素綁定指定的事件，通過本文給大家介紹jQuery on()綁定動態(tài)元素出現(xiàn)的問題小結(jié)，需要的朋友參考下2016-02-02
這篇文章介紹了用jquery存取照片的具體實現(xiàn)方法，需要的朋友可以參考一下2013-06-06
這篇文章運用實例介紹了jQuery的無new構(gòu)建，小編感覺介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧。2016-08-08