js实现文字无缝轮播
更新时间:2022年07月14日 08:32:24 作者:喜东东啊
这篇文章主要为大家详细介绍了js实现文字无缝轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文实例为大家分享了js实现文字无缝轮播的具体代码,供大家参考,具体内容如下
所用到的知识点:
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
浅谈typescript中keyof与typeof操作符用法
本文主要介绍了typescript中keyof与typeof操作符用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-06-06javascript中Number对象的toString()方法分析
这篇文章主要介绍了javascript中Number对象的toString()方法,较为详细的分析了toString()方法的用法及注意事项,非常具有实用价值,需要的朋友可以参考下2014-12-12
最新评论