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 相关文章推荐
jQuery Ajax使用实例
Apr 16 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
js中作用域的实例解析
Mar 16 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
Admin generator, filters and I18n
2011/10/06 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
一些Python中的二维数组的操作方法
2015/05/02 Python
python删除列表内容
2015/08/04 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
什么是python的必选参数
2020/06/21 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
任课老师推荐信范文
2013/11/24 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
大学毕业感言50字
2014/02/07 职场文书
心理学专业求职信
2014/06/16 职场文书
寒假安全保证书
2015/02/28 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS