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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
jquery插件validate验证的小例子
May 08 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
vue input标签通用指令校验的实现
Nov 05 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
浅谈js闭包理解
2019/04/01 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python print出共轭复数的方法详解
2019/06/25 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
编写python代码实现简单抽奖器
2020/10/20 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
班组长岗位职责范本
2014/01/05 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
小学学校评估方案
2014/06/08 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
《角的度量》教学反思
2016/02/18 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python