快捷導(dǎo)航

jQuery循環(huán)滾動(dòng)展示代碼可應(yīng)用到文字和圖片上

更新時(shí)間：2012年05月11日 17:09:39 作者：

循環(huán)滾動(dòng)展示的文字和圖片每個(gè)人都見(jiàn)過(guò)，實(shí)現(xiàn)類似效果的 JS 也很多。但如果只用于幾個(gè)條目或三五張圖片，體積龐大的 JS 會(huì)浪費(fèi)資源

看見(jiàn)有的同學(xué)用 Adam Cai 的代碼，感覺(jué)稍顯復(fù)雜而且不夠 jQuery。我用只依靠 jQuery 入門的思路寫(xiě)了一版，代碼更少使用也更簡(jiǎn)單。

在線演示： 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> 

您可能感興趣的文章:

循環(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元素
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)畫(huà)效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-10-10
Jquery 彈出層插件實(shí)現(xiàn)代碼
工作不忙，閑來(lái)無(wú)事寫(xiě)了一個(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下拉選擇框插件支持單選多選功能代碼
這篇文章主要介紹了基于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
Jquery實(shí)現(xiàn)三層遍歷刪除功能代碼
遍歷每一行的同時(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