js图片滚动效果时间可随意设定当鼠标移上去时停止


Posted in Javascript onJune 26, 2014
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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: 1000px;
}

#demo img {
border: 10px 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="images/小美景1.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景2.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景3.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景4.jpg" border="0" />
</a>
<a href="#"><img src="images/小美女4.jpg" border="0" />
</a>
<a href="#"><img src="images/小美女2.jpg" border="0" />
</a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=50;
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中的面向对象介绍
Jun 30 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
详解VUE 数组更新
Dec 16 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 #Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 #Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 #Javascript
JS的事件绑定深入认识
Jun 26 #Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 #Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 #Javascript
document.forms用法示例介绍
Jun 26 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Vue3为什么这么快
2020/09/23 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python验证文件是否可读写代码分享
2017/12/11 Python
Python爬虫文件下载图文教程
2018/12/23 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
会计实习自我鉴定
2013/12/04 职场文书
大型活动策划方案
2014/01/12 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书