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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
JSON相关知识汇总
Jul 03 Javascript
Javascript的表单验证长度
Mar 16 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
ES6数组的扩展详解
Apr 25 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
es6中reduce的基本使用方法
Sep 10 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php学习笔记之面向对象
2014/11/08 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python中函数的返回值示例浅析
2019/08/28 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
如何现实servlet的单线程模式
2014/08/05 面试题
外贸实习生自荐信范文
2013/11/24 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
教师评优事迹材料
2014/01/10 职场文书
文明教师事迹材料
2014/01/16 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
班级文化建设标语
2014/06/23 职场文书
爱国教育主题班会
2015/08/14 职场文书
大学生村官工作心得体会
2016/01/23 职场文书