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 相关文章推荐
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
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/06/04 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php测试kafka项目示例
2020/02/06 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python对数据库操作
2016/03/28 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python玩转Excel的读写改实例
2019/02/22 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python 5个实用的技巧
2020/09/27 Python
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
税务会计岗位职责
2014/02/18 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
工程款催款函
2015/06/24 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL