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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 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
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php cookis创建实现代码
2009/03/16 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python 文件操作实现代码
2009/10/07 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
新浪网技术部笔试题
2016/08/26 面试题
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
什么是方法的重载
2013/06/24 面试题
中式面点餐厅创业计划书
2014/01/29 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
汽车促销活动方案
2014/03/31 职场文书
法学院毕业生求职信
2014/06/25 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android