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扩展自写的 UI导航
Jan 13 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
jQuery 插件开发指南
Nov 14 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
JavaScript实现拖拽功能
Feb 11 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python 装饰器的使用示例
2020/10/10 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
小学生操行评语
2014/04/22 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
社区端午节活动总结
2015/02/11 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android