友情链接logo图进行自动轮播代码实现教程
程序员文章站
2022-04-25 17:33:10
html页面:
html页面:
<p id="list" class="picutre_many" style="overflow: hidden; width: 100%; margin: 0 auto"> <table cellspacing="0" cellpadding="0" style="width: 100%; border: 0"> <tr> <td id="list1"> <table style="border: 0" cellpadding="0" cellspacing="0"> <tr id="pic"> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_01.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_02.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_03.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_04.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_05.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_06.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_07.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_08.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_09.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_10.jpg" /></a> </td> <td> <a href=""><img style="border: 0;" alt="" src="img/logo_11.jpg" /></a> </td> </tr> </table> </td> <td id="list2"></td> </tr> </table> </p>
js脚本:
<script type="text/javascript"> /*图片滚动效果*/ var speedpic = 30;//速度数值越大速度越慢 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>
图片效果:
上一篇: 自学MySql内置函数知识点总结
下一篇: PHP简洁函数小结