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不同类型数据之间的运算的转换方法
Feb 13 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
JavaScript实现select添加option
Jul 03 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 Javascript
JS实现简单的九宫格抽奖
Jun 28 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实现的xml操作类
2016/01/15 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
js CSS操作方法集合
2008/10/31 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python 性能提升的几种方法
2016/07/15 Python
Python异常处理例题整理
2019/07/07 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python实现图片插入文字
2019/11/26 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python 绘制正态曲线的示例
2020/09/24 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
大队委竞选演讲稿
2014/04/28 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
电子专业自荐信
2014/07/01 职场文书
小学运动会报道稿
2014/10/04 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python