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>
上一篇:Python & Django 学习笔记


下一篇:php session序列化攻击面浅析