javascript 不间断向左滚动图片
<!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=utf-8" />
<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="./images/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="./images/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="./images/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="./images/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="./images/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="./images/wall_s4.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 不间断向左滚动图片的更多相关文章
- 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 实现图片无缝向左滚动
<script type="text/javascript" src="_pub/Script/jquery.js"></script> ...
- 二、JavaScript语言--JS实践--信息滚动效果制作
运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- .net asp [转载]ASP:循环滚动图片的代码+解释
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- jquery控制左右箭头滚动图片列表
jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- (转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- HDU 4722 Good Numbers
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4722 Good Numbers Time Limit: 2000/1000 MS (Java/Othe ...
- Tornado源码探寻(请求到来)
上一篇中介绍了tornado框架在客户端请求之前所做的准备(下图1.2部分),本质上就是创建了一个socket服务端,并进行了IP和端口的绑定,但是未执行 socket的accept方法,也就是未获取 ...
- 初级程序员应该了解的Linux命令
基于Linux的系统最美妙的一点,就是你可以在终端中使用命令行来管理整个系统.使用命令行的优势在于,你可以使用相同的知识和技能来管理随便哪个Linux发行版. 对于各个发行版以及桌面环境(DE)而言, ...
- 小Q书桌的下载、安装和使用
最近,无意之间,在某大牛电脑里,使用到了这款软件.感谢! 确实,挺实用和方便的,强烈推荐!!! 1. 下载 http://qdesk.qq.com/ 2. 安装 3. 使用 多么方便啊!
- .NET中ToString()的用法
一.数字转换到字符串 格式说明符 说明 示例 输出 C 货币 2.5.ToString(& ...
- java连接oracle的简单实例
连接oracle的时候,要导入oracle驱动的jar包. 连接的时候,有statement和preparedstatement两种,从代码中可以看出不同. example: package com. ...
- park、unpark、ord 函数使用方法(转)
park,unpark,ord这3个函数,在我们工作中,用到它们的估计不多. 我在最近一个工作中,因为通讯需要用到二进制流,然后接口用php接收.当时在处理时候,查阅不少资料.因为它们使用确实比较少, ...
- android 77 fragment
fragment是3.0之后才有的,之前平板是3.0专用,后来手机和平板都用3.0 Activity: package com.itheima.fragment; import android.os. ...
- struts2标签汇总
要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码:<%@taglib prefix="s" uri="/struts- ...
- QT皮肤系统的动态切换
应用需求: 提供皮肤切换选项,在不重启应用程序的情况下实现皮肤的动态切换. 理论基础: 1) 图片资源是如何被利用的 这里先简要说明一下实现原理,皮肤的动态切换其关键在于图片资源的加载方式.QT中每个 ...