快捷導(dǎo)航

JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)代碼

更新時(shí)間：2013年04月19日 16:36:23 作者：

在某些情況下需要這樣的功能:使用JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)，接下來為大家詳細(xì)介紹下實(shí)現(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

您可能感興趣的文章:

相關(guān)文章

微信小程序獲取地理位置及經(jīng)緯度授權(quán)代碼實(shí)例
這篇文章主要介紹了微信小程序獲取地理位置及經(jīng)緯度授權(quán)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JS 獲取span標(biāo)簽中的值的代碼支持ie與firefox
JS獲取span標(biāo)簽中的值的代碼，在實(shí)際應(yīng)用中經(jīng)常用的到的功能，原理很簡單，大家可以拓展下。
2009-08-08
前端到后端的數(shù)組傳輸三種高效方法
在前端開發(fā)中,我們經(jīng)常需要和后端進(jìn)行數(shù)據(jù)交互,下面這篇文章主要給大家介紹了關(guān)于前端到后端的數(shù)組傳輸?shù)娜N高效方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
JavaScript+H5實(shí)現(xiàn)微信搖一搖功能
這篇文章主要為大家詳細(xì)介紹了JavaScript+H5實(shí)現(xiàn)微信搖一搖功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-05-05
基于javascript實(shí)現(xiàn)判斷移動(dòng)終端瀏覽器版本信息
這篇文章主要介紹了基于javascript實(shí)現(xiàn)判斷移動(dòng)終端瀏覽器版本信息,需要的朋友可以參考下
2014-12-12
Bootstrap4一次重大更新幾乎涉及每行代碼
Bootstrap 4是一次重大更新，幾乎涉及每行代碼，這篇文章為大家分享了Bootstrap 4.0重大更新及亮點(diǎn)詳細(xì)解讀，感興趣的小伙伴們可以參考一下
2016-05-05
原生JS實(shí)現(xiàn)拖拽圖片效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)拖拽圖片效果，JS實(shí)現(xiàn)圖標(biāo)圖拖拽，拖拽的過程中不斷輸出該div的left、top值，感興趣的小伙伴們可以參考一下
2016-02-02
JavaScript中Array的filter函數(shù)詳解
這篇文章主要介紹了JavaScript中Array的filter函數(shù)詳解,filter?為數(shù)組中的每個(gè)元素調(diào)用一次callback函數(shù),W更多具體內(nèi)容，需要的朋友可以參考一下
2022-07-07
九個(gè)超級好用的Javascript技巧
在實(shí)際的開發(fā)工作過程中，積累了一些常見又超級好用的 Javascript 技巧和代碼片段，包括整理的其他大神的 JS 使用技巧，今天篩選了 9 個(gè)，以供大家參考
2023-04-04
js實(shí)現(xiàn)的八點(diǎn)拖動(dòng)修改div大小的代碼
八點(diǎn)改變div大小的實(shí)現(xiàn)代碼，代碼相對來說并不多，需要的朋友可以參考下。
2010-02-02