Javascript学习之无缝滚动
无缝滚动Javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; padding: 0;}
.div1{position: relative; height: 132px; width: 680px;border:1px solid black;margin:10px auto;overflow: hidden;}
.div1 ul {position: absolute;}
.div1 ul li{list-style: none;float: left;width: 150px; height: 112px;padding: 10px;}
.div1 ul li img{width: 150px; height: 112px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload = function(){
var oDiv= document.getElementById("div1");
var oUl = getByClass(oDiv,"ul1")[0];
var oLi = oUl.getElementsByTagName('li');
var oA = document.getElementsByTagName("a");
var iSpeed = 1;//设置速度
var timer = null;//定时器 oUl.innerHTML += oUl.innerHTML;//复制一份Ul,和原来的叠加在一起
oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";//设置Ul的宽度
//alert(oLi.length * 170); timer = setInterval(fnMover,30);//页面加载完成就开始滚动
oA[0].onclick = function(){//点击向左滚动,改变速度为负值
iSpeed = -1;
}
oA[1].onclick = function(){//点击向右滚动,改变速度为正值
iSpeed = 1;
}
oDiv.onmouseover = function(){//鼠标经过,停止滚动
clearInterval(timer);
}
oDiv.onmouseout = function(){//鼠标离开,继续滚动
timer = setInterval(fnMover,30);
}
//滚动的函数
function fnMover(){
if(oUl.offsetLeft < -oUl.offsetWidth/2){//如果当前Left的值小于负的宽度的一半,那么,小Left的值为0
oUl.style.left =0;
}else if(oUl.offsetLeft > 0){//如果当前Left的值大于0;那么,让Left的值为负的宽度的一半
oUl.style.left = -oUl.offsetWidth/2 +"px";
} oUl.style.left = oUl.offsetLeft +iSpeed + "px";//Left的值等于当前Left加速度 }
};
function getByClass(obj,sClass){//用Class获取元素
var aEle = document.getElementsByTagName("*");//获取所有的元素
var i=0;
var aResult = [];
for(i=0;i<aEle.length;i++){
if(sClass == aEle[i].className){//如果当前元素等于数组中的一个元素,那么取出来放在数组aResult中
aResult.push(aEle[i]);
}
}
return aResult;
}
</script>
</head>
<body>
<a href="javascript:;"><-</a>
<a href="javascript:;">-></a>
<div class="div1" id="div1">
<ul class="ul1">
<li><img src="data:image/item1.jpg"></li>
<li><img src="data:image/item2.jpg"></li>
<li><img src="data:image/item3.jpg"></li>
<li><img src="data:image/item4.jpg"></li>
<li><img src="data:image/item5.jpg"></li>
<li><img src="data:image/item6.jpg"></li>
<li><img src="data:image/item7.jpg"></li>
</ul>
</div>
</body>
</html>
Javascript学习之无缝滚动的更多相关文章
- Javascript 学习笔记 无缝滚动
效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 <style type="text/css"> * { margin:; padding ...
- 原生javascript效果:无缝滚动
<style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...
- Javascript实现图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript实现图片无缝滚动(scrollLeft的使用方法介绍)
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- javascript小例子:實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
随机推荐
- Ubuntu12.04安装lnmp环境笔记
说明:笔记中使用的命令都是在root账户权限下执行的,如果使用的是普通账户,请注意在命令前加上“sudo”指令. 1.更新apt-get软件库: 命令:apt-get update 该操作的目的是确保 ...
- Linux/CentOS 搭建 SVN 项目
1.安装svn yum -y install subversion 2.创建svn仓库路径 mkdir -p /opt/svn/project1 mkdir -p /opt/svn ...
- PHP HTML代码反转义
后端为了防止xss的攻击,会过滤前端用户的输入的数据,这样虽然有效的避免xss攻击,但是会带来一个问题,要么全部过滤html留下不非法的数据,要么把HTML代码转义,但是转义之后又会直接在浏览器内显示 ...
- Qt界面中嵌入其他exe程序的界面,使用Qt5
下面用一个小例子来演示如何在Qt的界面中嵌入其他exe程序的界面,最终效果如下图所示.本文参考了 http://blog.csdn.net/jiaoyaziyang/article/details/4 ...
- linux下编译安装vim7.4并安装clang_complete插件
linux下编译安装vim7.4并安装clang_complete插件 因为debian里软件仓库中下载安装的vim是不支持python写的插件的(可以打开vim,在命令模式先输入:py测试一下),导 ...
- Collection接口
Collection接口所定义的方法: clear:清空 retainAll 求一个Collection和另一个 Collection的交集. object[] toArray() 把里面的各个对象 ...
- Angularjs 双向绑定机制解析
文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...
- assign more memory to Gradle
Please assign more memory to Gradle in the project's gradle.properties file.For example, the followi ...
- PHP 面向对象
封装与不封装的区别: 未封装 时 外部随意更改数据 数据 不需要判定 就可以执行 外部直接操作数据 封装: 外部同样可以对数据更改,但需要 调用 类里面的 函数 外部间接操作数据 ...
- 【python】继承关系和isinstance
来源:廖雪峰 继承关系是: object -> Animal -> Dog -> Husky 那么,isinstance()就可以告诉我们,一个对象是否是某种类型.先创建3种类型的对 ...