很简单的js图片滚动
编辑时间：2018-06-29
作者：金满斗
浏览量：1972
来源：原创
以前记在有道云笔记上的，今天有时间转过来。
没有用第三方的js插件，纯原生。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
img{ border:none;}
.gd_img{
width:100%;
text-align:left;
position: relative;
padding-top:10px;
line-height:120%;
margin-bottom:10px;
background-color:#CCCCCC;
}
.gd_img a{
color:#000;text-decoration: none;}
.gd_img a:hover{
color:#FF0000;
}
.gd_img td.a.img{
}
.gd_img .caseb{position:absolute;
margin-top:-9px;}
.gd_img #tupian td{
padding-right:12px;
width:110px;
}
.gd_img #tupian td img{
width:100px;
height:140px;
overflow:hidden;
}
</style>
</head>
<body>
<!--swf02-->
<DIV id=demo class="hdo gd_img" style="OVERFLOW: hidden; WIDTH: 735px; HEIGHT: 165px">
<TABLE cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<TABLE cellSpacing=0 cellPadding=4 width=2150 border=0 id="tupian">
<TBODY>
<TR>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/01.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/02.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/01.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/02.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/01.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/02.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/01.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/02.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/03.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/04.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/05.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/08.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/06.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/07.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/08.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/01.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/02.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/03.jpg" ><BR>王晓兰律师</A></TD>
<TD align=middle><A class=a1 href="#"><IMG src="zsimg/04.jpg" ><BR>王晓兰律师</A></TD>
</TR></TBODY></TABLE></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed1=25//速度数值越大速度越慢
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee1(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed1)
document.getElementById("demo").onmouseover=function () {clearInterval(MyMar1)}
document.getElementById("demo").onmouseout=function () {MyMar1=setInterval(Marquee1,speed1)}
</SCRIPT>
<!--//swf02-->
</body>
</html>图片没有，没关系，看的就是效果而已。
好用记账软件、聚宝盆记账易
热文排行
最近分享