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>

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

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/4014.html

js实现文字无缝轮播

相关推荐

发表评论