网站首页 php及前端 很简单的js图片滚动
很简单的js图片滚动
编辑时间:2018-06-29 作者:金满斗 浏览量:52 来源:原创

以前记在有道云笔记上的,今天有时间转过来。

没有用第三方的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>

图片没有,没关系,看的就是效果而已。


来说两句吧