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 写类方式之十
Jul 05 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 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
php 将excel导入mysql
2009/11/09 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
Python中多线程及程序锁浅析
2015/01/21 Python
Python下Fabric的简单部署方法
2015/07/14 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
中专生自荐信
2013/10/12 职场文书
跟单文员岗位职责
2014/01/03 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
爱情保证书范文
2014/02/01 职场文书
亲子读书活动方案
2014/02/22 职场文书
经典安踏广告词
2014/03/21 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL