这个效果还是比较常见实用的，下面为大家献上代码：其中图片地址大家可以自行更换，
此处不太方便添加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#demo {
overflow: hidden;
height: 300;
width: 80%;
color: #ffffff;
/* margin: 0 auto; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="demo">
<table align="left" cellspace="0" border="0" cellpadding="0">
<tr>
<td id="demo1" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellSpacing="0" border="0" cellPadding="7">
<tbody>
<tr align="middle">
<td><img src="pic/005.jpg" alt="" width="500" height="300"></td>
<td><img src="pic/004.jpg" alt="" width="500" height="300"></td>
<td><img src="pic/003.jpg" alt="" width="500" height="300"></td>
<td><img src="pic/002.jpg" alt="" width="500" height="300"></td>
<td><img src="pic/001.jpg" alt="" width="500" height="300"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed = 10;
//数值越大速度越慢
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
if (demo2.offsetWidth - demo.scrollLeft <= 0)
demo.scrollLeft -= demo1.offsetWidth;
else {
demo.scrollLeft++;
}
}
let MyMar = setInterval(Marquee, speed);
demo.onmouseover = function () {
clearInterval(MyMar);
}
demo.onmouseout = function () {
MyMar = setInterval(Marquee, speed);
}
</script>
</body>
</html>
4495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
