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= ...
随机推荐
- 利用bak文件恢复数据库问题小结
对备份的基础理解: --完整备份:完整备份会备份所有数据的区和少量的日志(日志文件用于恢复数据保持数据一致性).由于差异备份需要依据最后一次完整备份,因此完整备份会清楚一些分配位图数据. --差异备份 ...
- tengine-2.1.0 源码安装
[root@localhost tengine-]# yum update -y [root@localhost tengine-]# yum install gcc gcc-c++ autoconf ...
- 12.享元模式(Flyweight Pattern)
using System; using System.Collections; namespace ConsoleApplication5 { class Program { /// <summ ...
- 在ubuntu上搭建开发环境3---解决Y470一键系统重装之后恢复ubuntu引导启动的方法
2015/08/18 将知识.常用的操作整理出来一定要完整,注意细节. 就像下面是再2015.04.27时候整理的,当时确实实验成功了,但是可能忘记记下具体的细节,尤其是3.4.5.6步骤中的关于盘符 ...
- 用with实现python的threading，新鲜啊
哈哈,2.5以后可用.自动加锁释放,如同操作文件打开关闭一样. #!/usr/bin/env python # -*- coding: utf-8 -*- import threading impor ...
- Tiny Rss Reader - 迷你RSS阅读器
发布新软件 TinyRss: Windows平台上的一个小巧的Rss阅读器. 用户界面: 项目地址: https://github.com/movsb/tinyrss.git 测试下载: http:/ ...
- 机器学习系列：python
工欲善其事,必先利其器! 机器学习的理论需要有编程语言才能得以实现,我选择 python 作为编程语言,网络上有篇不错的教程:python 初级教程:入门详解. 转载自http://ww ...
- 湘潭1247 Pair-Pair(树状数组)
分析: 给定n个二元组,求选出两个二元组(可以是同一个)组成一序列其LIS为1,2,3,4的方法数. 分别记为s1, s2, s3, s4 s1,s4对应的情形为a >= b >= c & ...
- angularJS 二
angularJS 2.1 ngForm <!DOCTYPE html> <html lang="zh-cn" ng-app> <head> ...
- base64编码、解码的C语言实现
转自:http://www.cnblogs.com/yejianfei/archive/2013/04/06/3002838.html base64是一种基于64个可打印字符来表示二进制数据的表示方法 ...