JavaScript无缝滚动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;
padding: 0;
}
#div1{
width:1320px;
height:213px;
margin:100px auto;
position: relative;
background: red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left:0;
top:0;
}
#div1 ul li{
float: left;
width:330px;
height:213px;
list-style: none;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0]
var aLi=oUl.getElementsByTagName('li');
var speed=2; oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft-speed+'px';
} var timer=setInterval(move,30); oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(move,30);
} }
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
</div>
</body>
</html>
JavaScript无缝滚动的更多相关文章
- javascript无缝滚动原理
相比之下,无缝拼接能避免切换时出现空白,使用户体验更好! 无缝滚动原理: 制作一个双胞胎,内容跟主体内容一致,样式一致,如果横向排列则并排,当切换的时候,就可以弥补主体空白的地方,其他按普通循环操作即 ...
- javascript无缝滚动示例
效果 图片大小均为200*200; 默认向左循环滚动; 鼠标悬浮暂停,鼠标移走继续滚动; 可以在此基础进行扩展. 下面是代码: <!doctype html> <html lang= ...
- 利用scrollTop 制作图片无缝滚动
<!doctype html><title>javascript无缝滚动 by 司徒正美</title><meta charset="utf-8&q ...
- Javascript学习之无缝滚动
无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- JavaScript（六）——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
- Javascript实现图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生javascript效果：无缝滚动
<style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...
- Javascript 学习笔记 无缝滚动
效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 <style type="text/css"> * { margin:; padding ...
- javascript小例子：實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
随机推荐
- Myeclipse编写struts程序
说到struts则必须要谈到MVC模式(Model2) 什么是MVC模式.随着应用系统的逐渐增大,系统的业务逻辑复杂度以几何级数方式增加,在这样的情况下,如果还是把所有的处理逻辑都放在JSP页面中,那 ...
- jsDoc的使用
nodeJS使用: 直接:npm install jsdoc -g使用:jsdoc [name].js 简介 JsDoc Toolkit 是一款辅助工具,你只需要根据约定在 JavaScript 代码 ...
- SSH详解
Secure Shell (SSH) 是一个允许两台电脑之间通过安全的连接进行数据交换的网络协议.加密保证了数据的保密性和完整性.SSH采用公钥加密技术来验证远程主机,以及(必要时)允许远程主机验证用 ...
- String[] a = new String[]{"1","2"},我如果想增加一个"3"到a中，如何增加？
在java中数组是定长的,当你声明了数组的大小后数组的长度就不能改变在你的程序中,数组的初始化大小为2,a[0]="1";a[1]="2",所以无法产生元素a[ ...
- 解决VS2010 C++ DLL不能断点调试的问题
问题产生的过程是这样的,向exe项目(CSharp)中添加dll工程(c++开发)的引用,并将引用工程的属性“Link Library Dependencies”的值设为true,这样,在不加入lib ...
- hdu 2476 String Painter
第一道区间dp题,感觉题意不是很好理解 题意:一次可以转换某一个位置的字符,或是一串连续的字符,举第一个例子zzzzzfzzzzz 1:aaaaaaaaaaa 2: abbbbbbbbba 3: ab ...
- sql server 对象资源管理器（一）
当需要查看具体数据库的所有用户表.存储过程等创建修改等脚本的时候,可以借用视图中的对象资源管理器的详细信息里面获取. 具体操作如下图所示:
- cutpFTP设置步骤
cutpFTP设置步骤 平常时为了方便两台电脑之间传送数据,我们可以使用cutpftp这个工具实现,而且cutpftp还具有定时传送的功能,非常方便使用.以下是使用该工具的“同步文件夹”功能同步两台电 ...
- Git撤销提交和修改相关操作
团队开发中经常遇到错误删除文件,错误提交等情况,那么使用Git该如何正确的进行撤销和恢复呢? 一.增补提交 git commit –C HEAD –a --amend -C表示复用指定提交的提交留言, ...
- 重温WCF之流与文件传输（七）
WCF开启流模式,主要是设置一个叫TransferMode的属性,所以,你看看哪些Binding的派生类有这个属性就可以了. TransferMode其实是一个举枚,看看它的几个有效值: Buffer ...