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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php精度计算的问题解析
2019/06/21 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
JS设计模式之单例模式(一)
2017/09/29 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
Python实现优先级队列结构的方法详解
2016/06/02 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python求凸包及多边形面积教程
2020/04/12 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
饲料采购员岗位职责
2013/12/19 职场文书
早餐连锁店计划书
2014/01/08 职场文书
文艺节目主持词
2015/07/06 职场文书
八年级历史教学反思
2016/02/19 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
python实现自动清理文件夹旧文件
2021/05/10 Python