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 调用失败的原因示例介绍
Sep 27 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 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数学运算
2011/12/30 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python递归函数特点及原理解析
2020/03/04 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
英语简历自我评价
2014/01/26 职场文书
优秀民警事迹材料
2014/01/29 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
纪录片信仰观后感
2015/06/08 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
财产分割协议书
2016/03/22 职场文书