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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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 date函数参数详解
2006/11/27 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
python分析网页上所有超链接的方法
2015/05/08 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
自动化系在校本科生求职信
2013/10/23 职场文书
校园活动策划书范文
2014/01/10 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
销售助理岗位职责
2015/02/11 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python