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 相关文章推荐
JS 实现导航栏悬停效果
Sep 23 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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常用正则表达式的整理汇总
2013/06/08 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python中的pack和unpack的使用
2018/03/12 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
pandas删除指定行详解
2019/04/04 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
校园创业策划书
2014/01/14 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
21岁生日感言
2014/02/27 职场文书
2014年党员整改措施
2014/10/24 职场文书
西岭雪山导游词
2015/02/06 职场文书
保险内勤岗位职责
2015/04/13 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang