JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)代碼
<style type="text/css">
.content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden}
dl{width:400px;height:30px;border:1px solid black;}
</style>
<div class="content">
<dl>
<dt>測(cè)試數(shù)據(jù)1</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)2</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)3</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)4</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)5</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)6</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)7</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)8</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)9</dt>
</dl>
<dl>
<dt>測(cè)試數(shù)據(jù)10</dt>
</dl>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.content dl').hide();
$('.content dl:gt('+($('.content dl').length - 5)+')').show();
window.setInterval(function(){
$('.content dl:visible:first').prev().slideDown("fast",function(){
$(this).animate({opacity:1},2000,function(){
if($('.content dl:hidden').length == 0){
$('.content dl').hide();
$('.content dl:gt('+($('.content dl').length - 5)+')').show();
}
});
});
},1000);
});
</script>
代碼演示地址:
http://www.nailyo.com/js_demo/gundong.html
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到某個(gè)位置便自動(dòng)定位某個(gè)tr
- JS JQUERY實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾到底的方法
- 當(dāng)滾動(dòng)條滾動(dòng)到頁面底部自動(dòng)加載增加內(nèi)容的js代碼
- javascript實(shí)現(xiàn)圖片左右滾動(dòng)效果【可自動(dòng)滾動(dòng),有左右按鈕】
- 原生JS實(shí)現(xiàn)列表內(nèi)容自動(dòng)向上滾動(dòng)效果
- js固定DIV高度,超出部分自動(dòng)添加滾動(dòng)條的簡(jiǎn)單方法
- JS實(shí)現(xiàn)的新聞列表自動(dòng)滾動(dòng)效果示例
- 基于AngularJS實(shí)現(xiàn)頁面滾動(dòng)到底自動(dòng)加載數(shù)據(jù)的功能
- js/jquery控制頁面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法
- js實(shí)現(xiàn)公告自動(dòng)滾動(dòng)
相關(guān)文章
IE8下關(guān)于querySelectorAll()的問題
在IE8的新特性里,提到了會(huì)支持querySelector()和querySelectorAll()方法,如何使用這里就不說了,只是記錄下我在使用時(shí)遇到一個(gè)問題。2010-05-05跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換
跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換,感興趣的小伙伴們可以學(xué)習(xí)一下2015-11-11Bootstrap jquery.twbsPagination.js動(dòng)態(tài)頁碼分頁實(shí)例代碼
這篇文章主要介紹了Bootstrap jquery.twbsPagination.js動(dòng)態(tài)頁碼分頁實(shí)例代碼,需要的朋友可以參考下2017-02-02使用javascript實(shí)現(xiàn)監(jiān)控視頻播放并打印日志
這篇文章主要介紹了使用javascript實(shí)現(xiàn)監(jiān)控視頻播放并打印日志的方法及示例代碼分享,非常不錯(cuò),需要的朋友可以參考下2015-01-01js 靜態(tài)動(dòng)態(tài)成員 and 信息的封裝和隱藏
一下用面向?qū)ο蟮南嚓P(guān)概念來解釋js中的仿面向?qū)ο?,因?yàn)閖s中不像其他語言,不存在面向?qū)ο笳Z言的相關(guān)特性2011-05-05JavaScrpt判斷一個(gè)數(shù)是否是質(zhì)數(shù)的實(shí)例代碼
本文通過實(shí)例代碼給大家分享了JavaScrpt判斷一個(gè)數(shù)是否是質(zhì)數(shù),需要的朋友參考下吧2017-06-06django js 實(shí)現(xiàn)表格動(dòng)態(tài)標(biāo)序號(hào)的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了django js 實(shí)現(xiàn)表格動(dòng)態(tài)標(biāo)序號(hào) ,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07JavaScrip數(shù)組去重操作實(shí)例小結(jié)
這篇文章主要介紹了JavaScrip數(shù)組去重操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)數(shù)組的遍歷、判斷、去重等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06