您的位置：首页 > Web前端 > JavaScript

javascript实现的可改变滚动方向的无缝滚动

2013-06-17 13:48 597 查看

效果图如下：

代码：

<!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 type="text/css">

*{ margin:0; padding:0;}

#imgMove{ height:205px; width:624px; border:#000 1px solid; position:relative; margin:200px auto;overflow:hidden;}

#imgMove ul{ height:205px;position:absolute; left:0; overflow:hidden;}

#imgMove li{ list-style:none; float:left; height:205px; width:156px; margin:0;}

a img,img{ border:none;}

span{ z-index:999;height:68px; width:68px; display:none;position:absolute; cursor:pointer;}

#moveLeft{left:0; top:68px; }

#moveRight{right:-10px; top:68px;}

</style>

<script type="text/javascript">

window.onload=function(){

var oDiv=document.getElementById('imgMove');

var oUl=oDiv.getElementsByTagName('ul')[0];

var oli=oUl.getElementsByTagName('li');

var liSpeed=1;

var ospan=oDiv.getElementsByTagName('span');

var rightmove=document.getElementById('moveRight');

var leftmove=document.getElementById('moveLeft');

function show(){

ospan[0].style.display="block";

ospan[1].style.display="block";

}

oUl.onmouseover=function (){

show();

}

oUl.onmouseout=function(){

ospan[0].style.display="none";

ospan[1].style.display="none";

}

ospan[0].onmouseover=function(){

liSpeed=1;

show();/*加这个函数是为了去除向左向右的图片闪动*/

}

ospan[1].onmouseover=function(){

liSpeed=-1;

show();/*加这个函数是为了去除向左向右的图片闪动*/

}

oUl.style.width=oli[0].offsetWidth*oli.length+'px';;

setInterval(function(){

oUl.style.left=oUl.offsetLeft-liSpeed+'px';

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left=0;

}

else if(oUl.offsetLeft>0)

{

oUl.style.left=-oUl.offsetWidth/2+'px';

}

},30)

}

</script>

</head>

<body>

<div id="imgMove">

<ul>

<li><a href="#"><img src="images/1.png" /></a></li>

<li><a href="#"><img src="images/2.png" /></a></li>

<li><a href="#"><img src="images/3.png" /></a></li>

<li><a href="#"><img src="images/4.png" /></a></li>

<li><a href="#"><img src="images/1.png" /></a></li>

<li><a href="#"><img src="images/2.png" /></a></li>

<li><a href="#"><img src="images/3.png" /></a></li>

<li><a href="#"><img src="images/4.png" /></a></li>

</ul>

<span id="moveLeft"><img src="images/left.png" /></span>

<span id="moveRight"><img src="images/right.png" /></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航