JS图像无缝滚动脚本非常好用


Posted in Javascript onFebruary 10, 2014

找了好长时间,终于找到一个合适的了,根据需要改改宽度和图像个数就可以了,用循环动态调用数据库代码就OK了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>图片滚动</title> 
</head> 
<body> 
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
width: 500px; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
} 
#indemo { 
float: left; 
width: 800%; 
} 
#demo1 { 
float: left; 
} 
#demo2 { 
float: left; 
} 
--> 
</style> 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
</div> 
<script> 
<!-- 
var speed=10; 
var tab=document.getElementById("demo"); 
var tab1=document.getElementById("demo1"); 
var tab2=document.getElementById("demo2"); 
tab2.innerHTML=tab1.innerHTML; 
function Marquee(){ 
if(tab2.offsetWidth-tab.scrollLeft<=0) 
tab.scrollLeft-=tab1.offsetWidth 
else{ 
tab.scrollLeft++; 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.onmouseover=function() {clearInterval(MyMar)}; 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
--> 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
理解JavaScript事件对象
Jan 25 Javascript
javascript每日必学之运算符
Feb 16 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 #Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 #Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 #Javascript
js判断undefined类型示例代码
Feb 10 #Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 #Javascript
js网页实时倒计时精确到秒级
Feb 10 #Javascript
js格式化时间和js格式化时间戳示例
Feb 10 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
详解vue slot插槽的使用方法
2017/06/13 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python通过poll实现异步IO的方法
2015/06/04 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Pandas中resample方法详解
2019/07/02 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
小班开学寄语
2014/04/04 职场文书
职工小家建设活动方案
2014/08/25 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
催款函怎么写
2015/06/24 职场文书
新闻通讯稿模板
2015/07/22 职场文书