JS實現(xiàn)div內(nèi)部的文字或圖片自動循環(huán)滾動代碼
更新時間:2013年04月19日 16:36:23 作者:
在某些情況下需要這樣的功能:使用JS實現(xiàn)div內(nèi)部的文字或圖片自動循環(huán)滾動,接下來為大家詳細介紹下實現(xiàn)方法,感興趣的朋友可以參考下哈
復制代碼 代碼如下:
<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>測試數(shù)據(jù)1</dt>
</dl>
<dl>
<dt>測試數(shù)據(jù)2</dt>
</dl>
<dl>
<dt>測試數(shù)據(jù)3</dt>
</dl>
<dl>
<dt>測試數(shù)據(jù)4</dt>
</dl>
<dl>
<dt>測試數(shù)據(jù)5</dt>
</dl>
<dl>
<dt>測試數(shù)據(jù)6</dt>
</dl>
<dl>
<dt>測試數(shù)據(jù)7</dt>
</dl>
<dl>
<dt>測試數(shù)據(jù)8</dt>
</dl>
<dl>
<dt>測試數(shù)據(jù)9</dt>
</dl>
<dl>
<dt>測試數(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實現(xiàn)滾動條滾動到某個位置便自動定位某個tr
- JS JQUERY實現(xiàn)滾動條自動滾到底的方法
- 當滾動條滾動到頁面底部自動加載增加內(nèi)容的js代碼
- javascript實現(xiàn)圖片左右滾動效果【可自動滾動,有左右按鈕】
- 原生JS實現(xiàn)列表內(nèi)容自動向上滾動效果
- js固定DIV高度,超出部分自動添加滾動條的簡單方法
- JS實現(xiàn)的新聞列表自動滾動效果示例
- 基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
- js實現(xiàn)公告自動滾動
相關(guān)文章
IE8下關(guān)于querySelectorAll()的問題
在IE8的新特性里,提到了會支持querySelector()和querySelectorAll()方法,如何使用這里就不說了,只是記錄下我在使用時遇到一個問題。2010-05-05Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁實例代碼
這篇文章主要介紹了Bootstrap jquery.twbsPagination.js動態(tài)頁碼分頁實例代碼,需要的朋友可以參考下2017-02-02使用javascript實現(xiàn)監(jiān)控視頻播放并打印日志
這篇文章主要介紹了使用javascript實現(xiàn)監(jiān)控視頻播放并打印日志的方法及示例代碼分享,非常不錯,需要的朋友可以參考下2015-01-01js 靜態(tài)動態(tài)成員 and 信息的封裝和隱藏
一下用面向?qū)ο蟮南嚓P(guān)概念來解釋js中的仿面向?qū)ο?,因為js中不像其他語言,不存在面向?qū)ο笳Z言的相關(guān)特性2011-05-05JavaScrpt判斷一個數(shù)是否是質(zhì)數(shù)的實例代碼
本文通過實例代碼給大家分享了JavaScrpt判斷一個數(shù)是否是質(zhì)數(shù),需要的朋友參考下吧2017-06-06django js 實現(xiàn)表格動態(tài)標序號的實例代碼
本文通過實例代碼給大家介紹了django js 實現(xiàn)表格動態(tài)標序號 ,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07