JS图像无缝滚动脚本非常好用


Posted in Javascript onFebruary 10, 2014

找了好长时间,终于找到一个合适的了,根据需要改改宽度和图像个数就可以了,用循环动态调用数据库代码就OK了

<!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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 #Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 #Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 #Javascript
js判断undefined类型示例代码
Feb 10 #Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 #Javascript
js网页实时倒计时精确到秒级
Feb 10 #Javascript
js格式化时间和js格式化时间戳示例
Feb 10 #Javascript
You might like
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
js保留两位小数方法总结
2018/01/31 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Python中的各种装饰器详解
2015/04/11 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
解决python "No module named pip" 的问题
2018/10/13 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python实现画图软件功能方法详解
2020/07/28 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
创新比赛获奖感言
2014/02/13 职场文书
大学开学计划书
2014/04/30 职场文书
小学生读书笔记
2015/07/01 职场文书
跳高加油稿
2015/07/21 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python