 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 匀速的Js无缝图片滚动，可左右控制 |
| 来源：源码爱好者 更新时间：2011/8/21 12:34:54 阅读次数： 我要投稿 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝滚动</title>
<style>
body,div,ul,li{margin:0;padding:0;}
ul,li{list-style-type:none;}
#roll{width:600px;margin:120px auto;position:relative;}
.warp{width:600px;border:1px solid #000;height:150px;text-align:center;overflow:hidden;position:relative;}
#roll li{float:left;width:150px;height:150px;line-height:150px;background:#aacccc;margin-right:5px;}
#roll #left{position:absolute;left:-25px;top:0px;display:block;height:150px;}
#roll #right{position:absolute;right:-25px;top:0px;display:block;height:150px;}
#roll ul{position:absolute;left:0;top:0;}
</style>
<script>
function $(id){return document.getElementById(id);}
window.onload=function(){
var oDiv = $("roll");
var oUl = oDiv.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
var oBtnL=$("left");
var oBtnR=$("right");
var timer = null;
var iSpeed=-5;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=(oLi[0].offsetWidth+5)*oLi.length+"px";
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+iSpeed+"px";
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left="0px";
}
else if(oUl.offsetLeft >0){
oUl.style.left=-oUl.offsetWidth/2+"px";
};
},30);
oBtnL.onmouseover=function(){ iSpeed=-5;}
oBtnR.onmouseover=function(){ iSpeed=5;}
};
</script>
</head>
<body>
<div id="roll">
<a href="javascript:;" id="left">左</a>
<a href="javascript:;" id="right">右</a>
<div class="warp">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
</body>
</html> |
| 特效说明： |
一个匀速的Js无缝图片滚动，可左右控制，可能还不是太完善，有时候会现向左与向右滚动的速度不一致，尤其用火狐看很明显，是高手的朋友，烦请帮忙解决问题。 |
|
| 上一篇文章： 服装展示图片旋转效果jquery代码下一篇文章： 可控制的图片上下滚动效果 |
|
|
|
注册 登录
