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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
javascript删除数组元素的七个方法示例
Sep 09 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
通过html表格发电子邮件
2006/10/09 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python局域网ip扫描示例分享
2014/04/03 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python基于http下载视频或音频
2018/06/20 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python configparser模块常用方法解析
2020/05/22 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
汇科协同Java笔试题
2012/03/31 面试题
关于打架的检讨书
2014/01/17 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
卖车协议书
2014/04/21 职场文书
工作求职信
2014/07/04 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
你会写请假条吗?
2019/06/26 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python