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调试技巧解决样式问题的步骤分享
Mar 15 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
微信小程序实现简单表格
Feb 14 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
Openlayers实现地图全屏显示
Sep 28 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 生成饼图 三维饼图
2009/09/28 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
python else语句在循环中的运用详解
2020/07/06 Python
python如何建立全零数组
2020/07/19 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
小学运动会演讲稿
2014/08/25 职场文书
行政撤诉申请书
2015/05/18 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
MySQL 数据库范式化设计理论
2022/04/22 MySQL