你好,欢迎来到何平网络科技&织梦之家,你可以免费观看大量视频教程以及大量模板下载!

网站多图片横向循环滚动HTML代码,图片展示带超链接简单实用-织梦之家(dedehome.com)

时间:2018-07-30 19:42 来源:织梦之家作者:happy 点击:
网站多图片横向循环滚动HTML代码,图片展示带超链接简单实用 div id=demo style= overflow: hidden; width: 555px; height: 176px; table border=0 cellspacing=0 cellpadding=0 tr td valign=top id=marquePic1 !-- 要循环滚动的图片 -- table width=455 bo
网站多图片横向循环滚动HTML代码,图片展示带超链接简单实用




<div id="demo" style=" overflow: hidden; width: 555px; height: 176px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="marquePic1">
<!-- 要循环滚动的图片 -->
<table width="455" border="0" align="center" cellpadding="0" cellspacing="0" >
 
 
 
<tr align="center">
<td><a href="#"><img style="margin-left:10px;" src="Images/.jpg" width="118" height="166" border="1"></a> 
</td> 
<td> <a href="#"><img style="margin-left:10px;" src="Images/.jpg" width="118" height="166" border="1"></a> </td>
<td> <a href="#"><img style="margin-left:10px;" src="Images/.jpg" width="118" height="166" border="1"></a> </td>
<td> <a href="#"><img style="margin-left:10px;" src="Images/.jpg" width="118" height="166" border="1"></a> </td>
<td> <a href="#"><img style="margin-left:10px;" src="Images/.jpg" width="118" height="166" border="1"></a> </td>
<td> <a href="#"><img style="margin-left:10px;" src="Images/.jpg" width="118" height="166" border="1"></a> </td>
</tr>
</table>
</td>
 
 
 
<td id="marquePic2" width="1"></td>
</tr>
</table>
</div>
 
 
<script language="javascript">
var speed=30 ; //设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var demo=document.getElementById("demo"); //获取demo对象
function Marquee(n){ //实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){ 
demo.scrollLeft=0; 
}
else{ 
demo.scrollLeft=demo.scrollLeft+n;
var MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function() { //停止滚动
clearInterval(MyMar);
demo.onmouseout=function() { //继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
</script>

感谢支持织梦之家,你的支持,我们的无限动力!!!
    “DEDECMS教程”欢迎分享!:

    相关标签:代码(245)图片(178)滚动(39)横向滚动HTML(1)图片滚动JS代码(1)

    顶一下
    (2)
    100%
    踩一下
    (0)
    0%

    欢迎您报错,或提出宝贵建议,我们将第一时间处理,为大家营造一个良好网上交流平台,感谢支持织梦之家!