DIV+CSS 中让图片重复滚动
展开全部
只靠div+css是完成不了的。。。下面有js在里边。。你看看。。
<html>
<head>
<title></title>
<script type="text/javascript">
function $(e) { return document.getElementById(e); }
function jq(e) { return document.getElementsByTagName(e); }
var scroll = 0;
function load() {
var jud = 50 * (jq("img").length - 3);
if (scroll ==jud )
{ $("d").scrollTop = 0;scroll = 0; }
else {
$("d").scrollTop += 5;
scroll += 5;
}
}
var auto = setInterval(load, 300);
function stop() {
auto = clearInterval(auto);
}
function start() {
auto = setInterval(load, 300);
}
</script>
<style type="text/css">
#d{width:50px;height:200px;overflow:hidden;}
</style>
</head>
<body onload="load()">
<div id="d" onmouseover="stop()" onmouseout="start()">
<img width="50px" height="50px" src="images/1.jpg" />
<img width="50px" height="50px" src="images/2.jpg" />
<img width="50px" height="50px" src="images/3.jpg" />
<img width="50px" height="50px" src="images/4.jpg" />
<img width="50px" height="50px" src="images/5.jpg" />
<img width="50px" height="50px" src="images/6.jpg" />
<img width="50px" height="50px" src="images/7.jpg" />
<img width="50px" height="50px" src="images/8.jpg" />
<img width="50px" height="50px" src="images/9.jpg" />
<img width="50px" height="50px" src="images/10.jpg" />
</div>
</body>
</html>
<html>
<head>
<title></title>
<script type="text/javascript">
function $(e) { return document.getElementById(e); }
function jq(e) { return document.getElementsByTagName(e); }
var scroll = 0;
function load() {
var jud = 50 * (jq("img").length - 3);
if (scroll ==jud )
{ $("d").scrollTop = 0;scroll = 0; }
else {
$("d").scrollTop += 5;
scroll += 5;
}
}
var auto = setInterval(load, 300);
function stop() {
auto = clearInterval(auto);
}
function start() {
auto = setInterval(load, 300);
}
</script>
<style type="text/css">
#d{width:50px;height:200px;overflow:hidden;}
</style>
</head>
<body onload="load()">
<div id="d" onmouseover="stop()" onmouseout="start()">
<img width="50px" height="50px" src="images/1.jpg" />
<img width="50px" height="50px" src="images/2.jpg" />
<img width="50px" height="50px" src="images/3.jpg" />
<img width="50px" height="50px" src="images/4.jpg" />
<img width="50px" height="50px" src="images/5.jpg" />
<img width="50px" height="50px" src="images/6.jpg" />
<img width="50px" height="50px" src="images/7.jpg" />
<img width="50px" height="50px" src="images/8.jpg" />
<img width="50px" height="50px" src="images/9.jpg" />
<img width="50px" height="50px" src="images/10.jpg" />
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个需要js来解决
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
留个名，需要时来学习。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
参考网址:https://codepen.io/lilyH/pen/CjrHl/
利用css动画，重复执行就ok了
利用css动画，重复执行就ok了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
