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数字数组去重复项的实现代码
Dec 30 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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部分常见问题总结
2008/03/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
营销部内勤岗位职责
2014/04/30 职场文书
篝火晚会策划方案
2014/05/16 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
JavaScript中isPrototypeOf函数
2021/11/07 Javascript