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的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
15分钟上手vue3.0(小结)
May 20 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP的自定义模板引擎
2017/03/24 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
实习单位接收函模板
2014/01/10 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
关于安全的标语
2014/06/10 职场文书
应届生求职信范文
2014/06/30 职场文书
孩子教育的心得体会
2014/09/01 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
民主生活会主持词
2015/07/01 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
初中信息技术教学反思
2016/02/16 职场文书
2019广播稿怎么写
2019/04/17 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Python实现仓库管理系统
2022/05/30 Python