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 密码强弱度检测万能插件
Feb 25 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
js实现数组转换成json
Jun 26 Javascript
详解Bootstrap插件
Apr 25 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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
文件上传程序的全部源码
2006/10/09 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
个人简历自荐信
2013/12/05 职场文书
党员批评与自我批评
2014/02/12 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
会计岗位说明书
2014/07/29 职场文书
高三语文复习计划
2015/01/19 职场文书
食堂卫生管理制度
2015/08/04 职场文书
服务行业标语口号
2015/12/26 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
python 常用的异步框架汇总整理
2021/06/18 Python