用JavaScript设置图片向左无缝滚动，鼠标悬浮时停止滚动

最新推荐文章于 2022-05-20 23:54:45 发布

choucai3595

最新推荐文章于 2022-05-20 23:54:45 发布

阅读量465

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://my.oschina.net/u/3841968/blog/1940508

版权

<!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>
</head>
<body>
<style type="text/css">
.demo{overflow:hidden; width:815px; background-color:#eee;}
.demo .content{width:8000%; height:30px;}
.demo .content div{ float:left;}
</style>
<div id="demo" class="demo">
<div class="content">
<div id="demo1">
<img src="image/1.jpg">
<img src="image/2.gif">
<img src="image/3.jpg">
<img src="image/4.jpg">
<img src="image/5.jpg">
<img src="image/6.jpg">
<img src="image/7.jpg">
</div>
<div id="demo2"></div>
</div>
</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=document.getElementById("demo1").innerHTML;
function Marquee(){
if(demo.scrollLeft-demo2.offsetWidth>=0){
demo.scrollLeft-=demo1.offsetWidth;
}
else{
demo.scrollLeft++;
}
}
var myvar=setInterval(Marquee,1);
demo.οnmοuseοut=function(){myvar=setInterval(Marquee,1);}
demo.οnmοuseοver=function(){clearInterval(myvar);}
</script>
</body>
</html>

转载于:https://my.oschina.net/u/3841968/blog/1940508

choucai3595

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript设置图片向左无缝滚动，鼠标悬浮时停止滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt...
复制链接

扫一扫