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 追加tr和删除tr示例代码
Sep 12 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
JS实现滑动插件
Jan 15 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中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python操作列表的常用方法分享
2014/02/13 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python检测网络延迟的代码
2018/05/15 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
如何使用Pytorch搭建模型
2020/10/26 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
信息部岗位职责
2013/11/12 职场文书
路政管理求职信
2014/06/18 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
职工的安全责任书范文!
2019/07/02 职场文书