前面学习了相关js的一些基础知识，这节主要针对定时器作综合运用：
无缝滚动-基础
效果演示：
*物体运动基础
*让div移动起来
*offsetLeft的作用
*用定时器让物体连续移动
<style type="text/css">
#div1{ width:100px; height:100px; background:#CCC; margin-top:10px; position:absolute; left:0px;}
</style>
<script type="text/javascript">
window.onload=function()
{
var begin = document.getElementById("begin");
var stopp = document.getElementById("stopp");
var div1 = document.getElementById("div1");
var timer = null;
begin.onclick = function()
{
timer = setInterval(function(){
div1.style.left = div1.offsetLeft + 5 + "px";
},30);
//alert(div1.offsetLeft); 返回0
////在用offsetLeft时一定要在css里设置其left，否则取到的将是Null值,还有相应的position
};
stopp.onclick = function()
{
clearTimeout(timer);
};
};
</script>
</head>
<body>
<input id="begin" type="button" value="向左移动" />
<input id="stopp" type="button" value="停止移动" />
<div id="div1"></div>
</body>
--效果原理
让ul一直向左移动
复制li
a),innerHTML和 + ‘‘
b),修改ul的width
滚动过界后，重设位置
a).判断过界
相关代码：
<style type="text/css">
#div1{ width:100px; height:100px; background:#CCC; margin-top:10px; position:absolute; left:0px;}
.roll{ width:400px; height:120px; margin:50px auto 0; position:relative;}
img{ width:100px; height:100px; border:#FC9 1px solid;}
.btnLeft { display:block; width:30px; height:30px; background:url(pic/PagePre.png) no-repeat 12px 10px; position:absolute; top:50px; left:1px; z-index:1px; }
.btnLeft:hover { background:url(pic/PagePre.png) no-repeat 12px 9px;}
.btnRight{ display:block; width:30px; height:30px; background:url(pic/PageNext.png) no-repeat 1px 16px; position:absolute; top:50px; right: 0; z-index:1;}
.btnRight:hover { background:url(pic/PageNext.png) no-repeat 1px 15px;}
.warp { width:400px; height:120px; margin:0 auto; position:relative; overflow:hidden;}
ul{ list-style-type:none; position:absolute;}
li{ float:left; width:100px; height:100px; text-align:center;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv= document.getElementById("roll");
var oUI = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
//var oLeft = document.getElementById("left"); 向左按钮
//var oRight = document.getElementById("right"); 向右按钮
var wapDiv = document.getElementById("wap");
var timer = null;
var isSpeed = -5;
oUI.innerHTML += oUI.innerHTML;
oUI.style.width = oLi[0].offsetWidth * oLi.length + "px"; //400
timer = setInterval(function margin(){
oUI.style.left = oUI.offsetLeft + isSpeed + "px";
if(oUI.offsetLeft < -oUI.offsetWidth/2)
{
oUI.style.left = ‘0px‘ ;
}else if(oUI.offsetLeft > 0)
{
oUI.style.left = -oUI.offsetWidth /2;
}
},30);
wapDiv.onmouseout = function() //鼠标放上去
{
timer = setInterval(function margin(){
oUI.style.left = oUI.offsetLeft + isSpeed + "px";
if(oUI.offsetLeft < -oUI.offsetWidth/2)
{
oUI.style.left = ‘0px‘ ;
}else if(oUI.offsetLeft > 0)
{
oUI.style.left = -oUI.offsetWidth /2;
}
},30);
};
wapDiv.onmouseover = function() //鼠标移走
{
clearTimeout(timer);
};
<div class="roll" id="roll"> <a href="javascript:void(0);" id="left" class="btnLeft"></a> <a href="javascript:void(0);" id="right" class="btnRight"></a> <div id="wap" class="warp"> <ul> <li> <img src="pic/1.jpg" /> </li> <li> <img src="pic/2.jpg" /> </li> <li> <img src="pic/3.jpg" /> </li> <li> <img src="pic/4.jpg" /> </li> <li> <img src="pic/1.jpg" /> </li> <li> <img src="pic/2.jpg" /> </li> <li> <img src="pic/3.jpg" /> </li> <li> <img src="pic/4.jpg" /> </li> </ul> </div> </div>
向左向右的功能还有待完善，只需改变isSpeed=5;的参数，这里只有鼠标移入移出事件，类似效果图：
时间： 2024-11-13 07:30:17