图片无缝滚动

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_34174132

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/myspecialzone/p/5937900.html

本文介绍了一种使用HTML和JavaScript实现图片无缝滚动的方法。通过复制图片列表并动态调整位置，使得图片能在达到边界时平滑过渡到另一端，同时支持鼠标悬停暂停及左右方向控制。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
#box{width:600px;height:400px;border:3px solid #ff0000;margin:100px auto;position:relative;overflow:hidden;}
#box ul{height:400px;position:absolute;}
#box ul li{width:600px;height:400px;float:left;z}
</style>

<script type="text/javascript">

window.onload=function()
{
//获取要用到的元素
var oDiv=document.getElementById("box");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var aA=document.getElementsByTagName("a");
var speed=2;
//复制一份ul的内容也就是复制一份图片
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";
//滚动函数
function move(){
timer=setInterval(function()
{
//判断是否滚动到ul的一半（两份图的一半），是就left归零重新运动
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left=0;
}
//判断是否向右滚动，是就向左移一份图的距离
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+"px";
}
//通过offsetLeft+speed进行滚动
oUl.style.left=oUl.offsetLeft+speed+"px";
},30);
}
move();//调用函数使图片滚动
//鼠标移入关闭定时器停止滚动
oDiv.onmouseover=function()
{
clearInterval(timer);
}

//鼠标移出调用函数使滚动
oDiv.onmouseout=function()
{
move();
}
//向左运动
aA[0].onclick=function()
{
speed=-2;
}
//向右运动
aA[1].onclick=function()
{
speed=2;
}

};
</script>
</head>

<body>
<a href="javascript:;">左</a>
<a href="javascript:;">右</a>
<div id="box">
<ul>

<li><a href="javascript:;"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/05/234845t3pegillooc8gxho.jpg"</a></li>
<li><a href="javascript:;"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/05/234845ik7ekpbkmlmpp3w8.jpg"</a></li>
<li><a href="javascript:;"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/05/234845amsmtdgdm2r0gmcc.jpg"</a></li>
</ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/myspecialzone/p/5937900.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。