js代码实现无缝滚动(文字和图片)


Posted in Javascript onAugust 20, 2015

一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了。测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了。

代码如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝滚动</title>
<style>
* { margin: 0; padding: 0; }
.other { width: 100%; height: 50px; background: #F00; }
.main { width: 400px; height: 130px; margin: 0 auto; border: 1px solid #000; overflow: hidden; position: relative; }
.banner a { display: block; float: left; margin: 15px 0 0 15px; }
.banner { position: absolute; width: 800%; }
#wrap1,
#wrap2 { float: left; }
.text { text-align: center; }
#wrap1 a,
#wrap2 a { text-decoration: none; }
#wrap1 span,
#wrap2 span { display: block; width: 100px; height: 100px; border: 1px solid #000; font-size: 36px; text-align: center; background: #999; }
</style>
</head>
<body>
<div class="other">
</div>
<div class="text">
<a href="javascript:void(0)" id="left">向左</a> <a href="javascript:void(0)" id="right">向右</a>
</div>
<div class="main" id="main">
 <div class="banner" id="banner">
 <div id="wrap1">
  <a href="#"><span>1</span></a><a href="#"><span>2</span></a><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>5</span></a>
 </div>
 <div id="wrap2">
 </div>
 </div>
</div>
<div class="other">
</div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
 speed=-1;
 move=getId('banner');
 getId('wrap2').innerHTML=getId('wrap1').innerHTML;
 var time=setInterval(automove,10);
 getId('main').onmouseover=function(){
 clearInterval(time);
 }
 getId('main').onmouseout=function(){
 time=setInterval(automove,10);
 }
 getId('left').onclick=function(){
 speed=-1;
 }
 getId('right').onclick=function(){
 speed=1;
 }
}
function getId(id){
 return document.getElementById(id);
}
function automove(){
 if(parseInt(move.style.left)<= -getId('wrap1').offsetWidth){
 move.style.left=0+'px';
 }
 if(move.offsetLeft>0){
 move.style.left=-getId('wrap1').offsetWidth+'px';
 }
 move.style.left=move.offsetLeft+speed+'px';
}
</script>

以上所述就是本文针对js代码实现无缝滚动(文字和图片),希望大家喜欢。

Javascript 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
javascript if条件判断方法小结
May 17 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
简单实现JS计算器功能
Dec 21 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
ES10的13个新特性示例(小结)
Sep 23 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
js图片翻书效果代码分享
Aug 20 #Javascript
JS给Textarea文本框添加行号的方法
Aug 20 #Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 #Javascript
javascript如何操作HTML下拉列表标签
Aug 20 #Javascript
七夕情人节丘比特射箭小游戏
Aug 20 #Javascript
js脚本分页代码分享(7种样式)
Aug 19 #Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 #Javascript
You might like
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
js模块加载方式浅析
2017/08/12 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中的元类编程入门指引
2015/04/15 Python
python fabric实现远程部署
2017/01/05 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
抽象类和接口的区别
2012/09/19 面试题
家长学校工作方案
2014/05/07 职场文书
小学语文复习计划
2015/01/19 职场文书
捐款感谢信
2015/01/20 职场文书
三八妇女节致辞
2015/07/31 职场文书
2016特色励志班级口号
2015/12/24 职场文书