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>
<style type="text/css">
body,html,div,a{ margin:0 auto; padding:0}
#scroll_top {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 98%;
}
#scroll_top img {
border: 3px solid #F2F2F2;
}
#scroll_main {
float: left;
width: 800%;
}
#scroll1 {
float: left;
}
#scrol2 {
float: left;
margin-left:7px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var speed=50;var tab=document.getElementById("scroll_top");
var tab1=document.getElementById("scroll1");
var tab2=document.getElementById("scrol2");
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>
</head>
<body> <div id="scroll_top">
<div id="scroll_main">
<div id="scroll1">
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
<img src="http://www.google.com/images/errors/robot.png" alt="404" />
</div>
<div id="scrol2" ></div>
</div>
</div>
</body>
</html>
上面還有一篇是用jquery做的圖片無縫滾動。http://www.cnblogs.com/dying/p/3394529.html
Javascript实现图片无缝滚动的更多相关文章
- javascript实现图片无缝滚动（scrollLeft的使用方法介绍）
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 原生javascript效果：无缝滚动
<style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...
- Javascript做图片无缝平滑滚动
因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
随机推荐
- 第一章 ：绪论-Twitter数据的收集和处理
为什么要用twitter,我心里是一万头CNM在飞奔.这个国外的东西很不好访问到的,国内的政策,你懂的,不说这个了,还是想办法翻出去再说吧. 不知道别人都用的什么工具,看到太多的注册就头大,就选了一个 ...
- #pragma warning (default : n)
参考链接:http://www.cnblogs.com/JCSU/articles/1996483.html 在VC2013中编译以下win32 C++ 控制台程序,会产生2个告警warnings # ...
- NAND FLASH 原理
NAND FLASH 原理 http://www.360doc.com/content/12/0522/21/21412_212888167.shtml 闪存保存数据的原理: 与DRAM以电容作为存储 ...
- Magento输入正确的登陆名和密码无法进入后台
请找到 这个文件夹: app\code\core\Mage\Core\Model\Session\Abstract 然后修改Varien.php这个文件: 找到代码(大约88行): $cookiePa ...
- Timeout Detection & Recovery (TDR)
Timeout Detection & Recovery (TDR) NVIDIA® Nsight™ Development Platform, Visual Studio Edition 2 ...
- [坑]c#中double转字符串精度丢失问题记录
在项目遇到了一个比较大的double值,然后出现了一些意想不到的状况: double b=1141.161994934082; b.ToString();//'1141.16199493408' 然后 ...
- [Spice-devel] usbredir for Windows Client
Hello, I have been scouring the internet for information on how to do this. I've successfully instal ...
- hdoj 1008 Elevator
Elevator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- 如何使用Keil仿真环境查看CPU类型字长？【worldsing笔记】
笔者上次写了如何用IAR查CPU的字长和数据类长度的方法:点击这里查看 今天试着在Keil MDK 5.0 里查看CPU的字长和数据类长度,打开一个已有的工程,编译并进入Debug,如图1.1所示: ...
- android 随手记 videoview循环播放网络视频 和mediaplayer+sufaceview播放网络视频
1:videoview循环播放视频 1>xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res ...