JS图片无缝、平滑滚动代码


Posted in Javascript onMarch 11, 2014

非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。

<!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使用call调用微信API
Dec 15 Javascript
javascript中 try catch用法
Aug 16 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
详解ES6中的let命令
Apr 05 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 #Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 #Javascript
php析构函数的具体用法小结
Mar 11 #Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 #Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 #Javascript
JS对文本框值的判断示例
Mar 10 #Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 #Javascript
You might like
6种php上传图片重命名的方法实例
2013/11/04 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
js获取单选按钮的数据
2006/11/27 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python实现ftp文件传输功能
2020/03/20 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
法制宣传教育方案
2014/05/09 职场文书
公关活动策划方案
2014/05/25 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
新教师培训方案
2014/06/08 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
工程部部长岗位职责
2015/02/12 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
酒店温馨提示语
2015/07/14 职场文书
企业培训简报范文
2015/07/20 职场文书
Django如何与Ajax交互
2021/04/29 Python
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android