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问题整理
Aug 16 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
实现vuex原理的示例
Oct 21 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
写一个用户在线显示的程序
2006/10/09 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
python 写入csv乱码问题解决方法
2016/10/23 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python实现四人制扑克牌游戏
2020/04/22 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
工程业务员工作职责
2013/12/07 职场文书
无故旷工检讨书
2015/08/15 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
升职自荐书
2019/05/09 职场文书