图片滚动代码经常会用到，之前已经分享过了一个，上一次用的div做的图片列表，这一次分享一个用<table>制作的图片列表，供大家学习分享，其中的显示样式需要你自己调试成需要的样式，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; CHARSET=utf8-8">
<title>test</title>
<style>
.picutre_many img{width:200px; height:150px;}
</style>
</head>
<body>
<div id="list" class=" picutre_many"
style="overflow: hidden; height: 150px; width: 800px; margin: 0 auto;">
<table cellspacing="0" cellpadding="0"
style="width: 680px; border: 0px;">
<tr>
<td id="list1">
<table style="border: 0px;" cellpadding="0" cellspacing="0">
<tr id="pic">
<td><img style="border: 0px;" alt="" src="1.jpg" /></td>
<td><img style="border: 0px;" alt="" src="2.jpg" /></td>
<td><img style="border: 0px;" alt="" src="3.jpg" /></td>
<td><img style="border: 0px;" alt="" src="4.jpg" /></td>
<td><img style="border: 0px;" alt="" src="5.jpg" /></td>
</tr>
</table>
</td>
<td id="list2"></td>
</tr>
</table>
</div>
<script type="text/javascript">
/*图片滚动效果*/
var speedpic = 20;//速度数值越大速度越慢
document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
function Marqueepic() {
if (document.getElementById("list2").offsetWidth
- document.getElementById("list").scrollLeft <= 0) {
document.getElementById("list").scrollLeft -= document
.getElementById("list1").offsetWidth;
} else {
document.getElementById("list").scrollLeft++;
}
}
var MyMarpic = setInterval(Marqueepic, speedpic);
document.getElementById("list").onmouseover = function() {
clearInterval(MyMarpic);
}
document.getElementById("list").onmouseout = function() {
MyMarpic = setInterval(Marqueepic, speedpic);
}
</script>
</body>
</html>
淘宝店
