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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
js实现上传图片并显示图片名称
Dec 18 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php MessagePack介绍
2013/10/06 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
基于python中的TCP及UDP(详解)
2017/11/06 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
python logging模块的使用
2020/09/07 Python
python把一个字符串切开的实例方法
2020/09/27 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
大学生饮食配送创业计划书
2014/01/04 职场文书
本科生就业推荐信
2014/05/19 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
市场部经理岗位职责
2015/02/02 职场文书
慰问信格式规范
2015/03/23 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
毕业赠语大全
2015/06/23 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书