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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
表单验证的完整应用案例探讨
2013/03/29 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
总结Python编程中函数的使用要点
2016/03/20 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python实现三次样条插值
2018/12/17 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
行政前台岗位职责
2013/12/04 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
创先争优活动承诺书
2014/08/30 职场文书
售后客服个人自我评价
2014/09/14 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
青岛导游词
2015/02/12 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
婚礼父母致辞
2015/07/28 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL