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/ ...
随机推荐
- opencv 重用代码块记录
Created on 2013-8-7URL : http://blog.sina.com.cn/s/blog_a502f1a30101mfj4.html@author: zhxfl 转载请说明出处 ...
- hdu 单调队列
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4122 代码: #include<cstdio> #include<iostream& ...
- phpDesigner 工具快捷键巧用
Zend Studio工具默认的快捷方式, 如果你从事php工作, 自然能够体会到一些便利性, 比如CTRL+D, 可以直接复制当前一行, 这对于重复代码及调试都有很大帮助. Ctrl+U转换大小写之 ...
- Yii PHP 框架分析（三）
作者:wdy http://hi.baidu.com/delphiss/blog/item/357663d152c0aa85a1ec9c44.html Yii应用的入口脚本引用出了Yii类,Yii类的 ...
- Android之ContextMenu的使用方法以及与OptionMenu的区别
>> ContextMenu是android的context menu上下文菜单,选择某项VIEW后长按menu键,就会显示出来.比如EditeText就可以通过长按来弹出拥有“cut”, ...
- 几款开源的图形化Redis客户端管理软件推荐
Redis是一个超精简的基于内存的键值对数据库(key-value),一般对并发有一定要求的应用都用其储存session,乃至整个数据库.不过它公自带一个最小化的命令行式的数据库管理工具,有时侯使用起 ...
- C#封装加密算法（MD5、SHA、HMAC、DES、RSA）的一个类
using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Wen. ...
- HttpClient4.5.2 连接池原理及注意事项
随着微服务的流行,服务之间的http调用越来越多,遇到的问题也比较多,写这边文章的目的也是将自己遇到的坑和解决方案跟大家分享 一.为什么要用Http连接池 1.降低延迟:如果不采用连接池,每次连接发起 ...
- 23讲 URL
这是看完23讲后的小笔记,关于URL规则.伪静态. 一.URL规则 2.此处的区分大小写,也只是对第一个字母区分,并非对整个模块名. 3.模块名复杂时,且区分大小写,此时在地址栏访问时要用" ...
- JSP http头消息
头 描述 Accept 指定MIME类型 Accept-Charset 编码,例如utf-8 Accept-Encoding 编码方式,例如使用gzip压缩 Accept-Language 语言,例如 ...