js实现文字无缝轮播

3403771864 发布于2022-09-15 22:21 / 564人阅读

　　知识点介绍：

　　innerHTML 主要是为获取或设置某个对象的内容

　　scrollTop 主要是实现滚动条滚动的距离，注意这是系统定义好的属性

　　offsetHeight 获取或设置对象的高度

　　setInterval() 开始定时器

　　clearInterval() 关闭定时器

　　html布局结构如下：

　　其中con2是用来储存复制con1内容的容器

　　<body>
　　<div id="mooc">
　　<!-- 头部 -->
　　<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
　　<!-- 头部结束 -->
　　<!-- 中间 -->
　　<div id="moocBox">
　　<ul id="con1">
　　<li><a href="#">1.学会html5 绝对的逆袭（案例）</a><span>2013-09-18</span></li>
　　<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
　　<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
　　<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
　　<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
　　<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
　　<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
　　<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
　　<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
　　</ul>
　　<ul id="con2">
　　</ul>
　　</div>
　　<!-- 中间结束 -->
　　</div>
　　</body>

　　css样式如下：

　　<style>
　　body {
　　font-size: 12px;
　　line-height: 24px;
　　text-algin: center; /* 页面内容居中 */
　　}
　　* {
　　margin: 0px;
　　padding: 0px; /* 去掉所有标签的marign和padding的值 */
　　}
　　ul {
　　list-style: none; /* 去掉ul标签默认的点样式 */
　　}
　　a img {
　　border: none; /* 超链接下，图片的边框 */
　　}
　　a {
　　color: #333;
　　text-decoration: none; /* 超链接样式 */
　　}
　　a:hover {
　　color: #ff0000;
　　}
　　#mooc {
　　width: 399px;
　　border: 5px solid #ababab;
　　-moz-border-radius: 15px; /* Gecko browsers */
　　-webkit-border-radius: 15px; /* Webkit browsers */
　　border-radius: 15px;
　　box-shadow: 2px 2px 10px #ababab;
　　margin: 50px auto 0;
　　text-align: left; /* 让新闻内容靠左 */
　　}
　　/* 头部样式 */
　　#moocTitle {
　　height: 62px;
　　overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
　　font-size: 26px;
　　line-height: 62px;
　　padding-left: 30px;
　　background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
　　background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
　　border: 1px solid ##f05e6f;
　　-moz-border-radius: 8px 8px 0 0; /* Gecko browsers */
　　-webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
　　border-radius: 8px 8px 0 0;
　　color: #fff;
　　position: relative;
　　}
　　#moocTitle a {
　　position: absolute;
　　right: 10px;
　　bottom: 10px;
　　display: inline;
　　color: #fff;
　　font-size: 12px;
　　line-height: 24px;
　　}
　　/* 底部样式 */
　　#moocBot {
　　width: 399px;
　　height: 10px;
　　overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
　　}
　　/* 中间样式 */
　　#moocBox {
　　height: 144px;
　　width: 335px;
　　margin-left: 25px;
　　margin-top: 10px;
　　overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
　　}
　　#mooc ul li {
　　height: 24px;
　　}
　　#mooc ul li a {
　　width: 180px;
　　float: left;
　　display: block;
　　overflow: hidden;
　　text-indent: 15px;
　　height: 24px;
　　}
　　#mooc ul li span {
　　float: right;
　　color: #999;
　　}
　　</style>

　　js代码如下：

　　<script>
　　var area=document.getElementById('moocBox');
　　area.scrollTop=0;//scrollTop初始化对象滚动条的距离，此属性是系统标准化的
　　//获取第一个ul对象
　　var con1=document.getElementById('con1');
　　//获取第二个ul对象
　　var con2=document.getElementById('con2');
　　//将第一个ul对象里的内容给第二个ul对象
　　con2.innerHTML=con1.innerHTML;
　　//封装函数 用来判断滚动条的距离与盒子高度的关系
　　function scrollUp(){
　　if(area.scrollTop>=con1.offsetHeight){
　　area.scrollTop=0;
　　}else{
　　area.scrollTop++;
　　}
　　}
　　//声明定时器
　　var timer=null;
　　//解决暴力用户 在开启定时器之前最好先清除一下定时器
　　clearInterval(timer);
　　//开始定时器
　　timer=setInterval(scrollUp,50);
　　//为对象设置绑定鼠标滑过
　　area.onmouseover=function(){
　　clearInterval(timer);
　　}
　　//为对象绑定鼠标划出
　　area.onmouseout=function(){
　　timer=setInterval(scrollUp,50);
　　}
　　</script>

以上就是全部内容，请大家多多关注。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127739.html

js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

zhangwang 2019-08-22 18:24 评论0 收藏0
js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

PAMPANG 2019-08-02 10:48 评论0 收藏0
js、jQuery实现文字上下无缝轮播、滚动效果

摘要：因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。原生JS版本文字上下无缝轮播 * { margin: ...

focusj 2019-08-30 15:53 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

MSchumi 2019-08-02 16:03 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

hatlonely 2019-08-22 18:09 评论0 收藏0