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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
Javascript的无new构建实例详解
May 15 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
express 项目分层实践详解
Dec 10 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
js实现随机抽奖
Mar 19 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
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
通过实例了解JS 连续赋值
2019/09/24 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
python获取当前日期和时间的方法
2015/04/30 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书