js图片滚动

废话不多说，先看看图：

觉得行的继续向下看看：

首先引入js核心代码：MSClass.js

 1.        <script type="text/javascript" src="js/MSClass.js"></script>  

接下来是页面： 

1.            <TABLE cellSpacing=0 cellPadding=0 width=1000 align=center border=0>  

2.              <TBODY>  

3.              <TR>  

4.                <TD width=29><IMG id=left2 src="tu_18.jpg"    

5.                  width=29></TD>  

6.                <TD    

7.                style="BACKGROUND-IMAGE: url(images/tu_19.jpg); BACKGROUND-REPEAT: repeat-x"    

8.                vAlign=center width=944>  

9.                  <DIV id=marqueedivcontrol1>  

10.               <TABLE cellSpacing=0 cellPadding=0 width=944 border=0>  

11.                 <TBODY>  

12.                 <TR>  

13.                   <TD vAlign=center width=121 height=77>  

14.                     <TABLE cellSpacing=0 cellPadding=0 width=92 border=0>  

15.                       <TBODY>  

16.                       <TR>  

17.                         <TD vAlign=center align=middle><A    

18.                           href="http://localhost:82/cpzx_more.aspx?id=68"><IMG height=63    

19.                           src="128867533613437500153000.jpg"    

20.                           width=89 onload=javascript:DrawImage(this,89,63) border=0></A>    

21.                         </TD></TR>  

22.                       <TR>  

23.                         <TD class=heis align=middle>防弹押运车 </TD></TR></TBODY></TABLE></TD>  

24.                   <TD vAlign=center width=121 height=77>  

25.                     <TABLE cellSpacing=0 cellPadding=0 width=92 border=0>  

26.                       <TBODY>  

27.                       <TR>  

28.                         <TD vAlign=center align=middle><A    

29.                           href="http://localhost:82/cpzx_more.aspx?id=67"><IMG height=63    

30.                           src="tys_17.jpg" width=89    

31.                           onload=javascript:DrawImage(this,89,63) border=0></A> </TD></TR>  

32.                       <TR>  

33.                         <TD class=heis align=middle>NJK5049XGC </TD></TR></TBODY></TABLE></TD>  

34.                   <TD vAlign=center width=121 height=77>  

35.                     <TABLE cellSpacing=0 cellPadding=0 width=92 border=0>  

36.                       <TBODY>  

37.                       <TR>  

38.                         <TD vAlign=center align=middle><A    

39.                           href="http://localhost:82/cpzx_more.aspx?id=66"><IMG height=63    

40.                           src="tys_15.jpg" width=89    

41.                           onload=javascript:DrawImage(this,89,63) border=0></A> </TD></TR>  

42.                       <TR>  

43.                         <TD class=heis align=middle>NJK5056XGQ </TD></TR></TBODY></TABLE></TD>  

44.                   <TD vAlign=center width=121 height=77>  

45.                     <TABLE cellSpacing=0 cellPadding=0 width=92 border=0>  

46.                       <TBODY>  

47.                       <TR>  

48.                         <TD vAlign=center align=middle><A    

49.                           href="http://localhost:82/cpzx_more.aspx?id=65"><IMG height=63    

50.                           src="tys_13.jpg" width=89    

51.                           onload=javascript:DrawImage(this,89,63) border=0></A> </TD></TR>  

52.                       <TR>  

53.                         <TD class=heis align=middle>NJK5046XGC6    

54.         </TD></TR></TBODY></TABLE></TD>  

55.                   <TD vAlign=center width=121 height=77>  

56.                     <TABLE cellSpacing=0 cellPadding=0 width=92 border=0>  

57.                       <TBODY>  

58.                       <TR>  

59.                         <TD vAlign=center align=middle><A    

60.                           href="http://localhost:82/cpzx_more.aspx?id=64"><IMG height=63    

61.                           src="tys_11.jpg" width=89    

62.                           onload=javascript:DrawImage(this,89,63) border=0></A> </TD></TR>  

63.                       <TR>  

64.                         <TD class=heis align=middle>2055XGQ </TD></TR></TBODY></TABLE></TD>  

65.                   <TD vAlign=center width=121 height=77>  

66.                     <TABLE cellSpacing=0 cellPadding=0 width=92 border=0>  

67.                       <TBODY>  

68.                       <TR>  

69.                         <TD vAlign=center align=middle><A    

70.                           href="http://localhost:82/cpzx_more.aspx?id=63"><IMG height=63    

71.                           src="tys_09.jpg" width=89    

72.                           onload=javascript:DrawImage(this,89,63) border=0></A> </TD></TR>  

73.                       <TR>  

74.                         <TD class=heis align=middle>NJK5056XGQ </TD></TR></TBODY></TABLE></TD>  

75.                   <TD vAlign=center width=121 height=77>  

76.                     <TABLE cellSpacing=0 cellPadding=0 width=92 border=0>  

77.                       <TBODY>  

78.                       <TR>  

79.                         <TD vAlign=center align=middle><A    

80.                           href="http://localhost:82/cpzx_more.aspx?id=62"><IMG height=63    

81.                           src="tys_03.jpg" width=89    

82.                           onload=javascript:DrawImage(this,89,63) border=0></A> </TD></TR>  

83.                       <TR>  

84.                         <TD class=heis align=middle>方舱直播 </TD></TR></TBODY></TABLE></TD>  

85.                   <TD vAlign=center width=121 height=77>  

86.                     <TABLE cellSpacing=0 cellPadding=0 width=92 border=0>  

87.                       <TBODY>  

88.                       <TR>  

89.                         <TD vAlign=center align=middle><A    

90.                           href="http://localhost:82/cpzx_more.aspx?id=61"><IMG height=63    

91.                           src="tys_05.jpg" width=89    

92.                           onload=javascript:DrawImage(this,89,63) border=0></A> </TD></TR>  

93.                       <TR>  

94.                         <TD class=heis align=middle>5056XTX    

95.                 </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD>  

96.             <TD width=27><IMG id=right2 src="tu_21.jpg"    

97.               width=27></TD></TR></TBODY></TABLE>  

 页面要有一个东西的id是left2，和right2 供下面初始化，当然可以改成别的名字，哪下面也要该了，这两个id控制，向左滚还是向右滚

还有一个滚动涂层的id：marqueedivcontrol1

 

然后在<body>标签的最后一行加入一下代码： 

1.        <script type="text/javascript">  

2.            var marquee3 = new Marquee("marqueedivcontrol1");   

3.            var left2 = document.getElementById("left2");   

4.            var right2 = document.getElementById("right2");   

5.            marquee3.Direction = "right";   

6.            marquee3.Step = 1;   

7.            marquee3.Width = 940;   

8.            marquee3.Height = 85;   

9.            marquee3.Timer = 20;   

10.         marquee3.ScrollStep = 1; //此句禁止鼠标控制   

11.         marquee3.Start();   

12.         left2.onmouseover = function() { marquee3.Direction = 2 }   

13.         left2left2.onmouseout = left2.onmouseup = function() { marquee3marquee3.Step = marquee3.BakStep }   

14.         left2.onmousedown = right2.onmousedown = function() { marquee3marquee3.Step = marquee3.BakStep + 2 }   

15.         right2.onmouseover = function() { marquee3.Direction = 3 }   

16.         right2right2.onmouseout = right2.onmouseup = function() { marquee3marquee3.Step = marquee3.BakStep }   

17.     </script>

 

大功搞成，代码在这，要下的来拿吧！

点击下载