源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 30|回复: 13

[JavaScript] JS实现div内部的文字或图片自动循环滚动代码

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2013-4-19 16:36:23 | 显示全部楼层 |阅读模式
在某些情况下需要这样的功能:使用JS实现div内部的文字或图片自动循环滚动,接下来为大家详细介绍下实现方法,感兴趣的朋友可以参考下哈 复制代码 代码如下:
<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>测试数据1</dt>
</dl>
<dl>
<dt>测试数据2</dt>
</dl>
<dl>
<dt>测试数据3</dt>
</dl>
<dl>
<dt>测试数据4</dt>
</dl>
<dl>
<dt>测试数据5</dt>
</dl>
<dl>
<dt>测试数据6</dt>
</dl>
<dl>
<dt>测试数据7</dt>
</dl>
<dl>
<dt>测试数据8</dt>
</dl>
<dl>
<dt>测试数据9</dt>
</dl>
<dl>
<dt>测试数据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
回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-7 04:57:04 | 显示全部楼层
看看看看看看看看看看看看看看看看看看看看看看看看看看看
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

146

积分

注册会员

Rank: 2

积分
146
发表于 2023-2-10 10:33:19 | 显示全部楼层
还可以不错
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-20 17:02:35 | 显示全部楼层
来看看怎么样
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-6-28 12:00:24 | 显示全部楼层
看看看看看看看看看看看看看看看看看看看看看看看看看看看
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

50

积分

注册会员

Rank: 2

积分
50
发表于 2024-4-23 05:09:14 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-8-25 22:12:43 | 显示全部楼层
下载来瞧瞧
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-9-16 06:00:47 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2024-9-17 03:15:26 | 显示全部楼层
谢谢小Y分享
回复 支持 反对

使用道具 举报

4

主题

1万

回帖

60

积分

注册会员

Rank: 2

积分
60
发表于 2024-9-19 01:11:28 | 显示全部楼层
。。。。。。。。。。。。。。。
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-22 08:30 , Processed in 0.249791 second(s), 33 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表