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学习笔记一 之 数据类型
Dec 15 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
js实现轮播图特效
May 28 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
js验证账户名是否重复
2020/05/26 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python动态监控日志内容的示例
2014/02/16 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
经典c++面试题二
2015/08/14 面试题
大学四年职业生涯规划书范文
2014/01/02 职场文书
应聘面试自我评价
2014/01/24 职场文书
春节活动策划方案
2014/01/24 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
西湖英语导游词
2015/02/06 职场文书
何玥事迹观后感
2015/06/16 职场文书
领导欢送会主持词
2015/07/06 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书