1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>中国站长天空-网页特效-综合特效-实用的文本和图片无缝滚动效果</title>
5 <meta http-equiv="content-type" content="text/html;charset=gb2312">
6 <!--把下面代码加到<head>与</head>之间-->
7 <style type="text/css">
8 html,body,div,img,h1,h2,h3,h4,h5,h6{
9 vertical-align:baselinebaseline;
10 font-family:inherit;
11 font-weight:inherit;
12 font-style:inherit;
13 font-size:100%;
14 outline:0;
15 padding:0;
16 margin:0;
17 border:0;
18 }
19 body{
20 font-family:"宋体";
21 background:#e0e3ec url(http://www.zzsky.cn/effect/images/20123/272250/bg.jpg) repeat top left;
22 font-weight:400;
23 font-size:15px;
24 color:#393b40;
25 }
26 a{
27 color:#333;
28 text-decoration:none;
29 }
30 .container{
31 width:100%;
32 position:relative;
33 text-align:center;
34 }
35 h1{
36 line-height:60px;
37 font-size:22px;
38 clear:both;
39 }
40 h2{
41 padding-top:20px;
42 line-height:40px;
43 font-weight:bolder;
44 }
45 .main{
46 width:1001px;
47 margin: 10px auto 30px auto;
48 }
49 .content{
50 background:#FFFFFF;
51 border:1px solid #eaeaea;
52 padding:20px 0;
53 }
54 #newsbox{
55 height:150px;
56 overflow:hidden;
57 border:1px solid #e1e1e1;
58 width:350px;
59 margin:0 auto;
60 }
61 #newslist li{
62 line-height:25px;
63 text-align:left;
64 padding-left:15px;
65 }
66 table{
67 margin:0 auto;
68 border:1px solid #e1e1e1;
69 }
70 #probox{
71 width:700px;
72 overflow:hidden;
73 height:190px;
74 padding:15px 0;
75 }
76 #prolist{
77 width:1500px;
78 }
79 #prolist li{
80 float:left;
81 text-align:center;
82 line-height:25px;
83 }
84 #left,#right{
85 cursor:pointer;
86 }
87 </style>
88 <script type="text/javascript" src="http://www.zzsky.cn/effect/images/20123/272250/chaomao.js"></script>
89 </head>
90 <body>
91 <!--把下面代码加到<body>与</body>之间-->
92 <div class="container">
93 <div class="main">
94 <h1>无缝滚动</h1>
95 <h2>无缝滚动实例1</h2>
96 <div class="content">
97 <div id="newsbox">
98 <ul id="newslist">
99 <li>我是javasscript100插件无缝滚动功能</li>
100 <li>我是无缝滚动的哦</li>
101 <li>我的滚动间隔是3秒</li>
102 <li>我没有拖动按钮</li>
103 <li>我的滚动方向是从上向下滚动的</li>
104 <li>我是javasscript100插件无缝滚动功能</li>
105 <li>我是javasscript100插件无缝滚动功能</li>
106 <li>我是javasscript100插件无缝滚动功能</li>
107 <li>我是javasscript100插件无缝滚动功能</li>
108 <li>我是javasscript100插件无缝滚动功能</li>
109 </ul>
110 </div>
111 </div>
112 <h2>无缝滚动实例2</h2>
113 <div class="content">
114 <table align="center">
115 <tr>
116 <td id="left"><img src="http://www.zzsky.cn/effect/images/20123/272250/left.jpg"></td>
117 <td>
118 <div id="probox">
119 <ul id="prolist">
120 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad1</li>
121 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad2</li>
122 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad3</li>
123 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad4</li>
124 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad5</li>
125 <li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad6</li>
126 </ul>
127 </div>
128 </td>
129 <td id="right"><img src="http://www.zzsky.cn/effect/images/20123/272250/rihgt.jpg"></td>
130 </tr>
131 </table>
132 </div>
133 </div>
134 </div>
135 <script type="text/javascript">
136 js100(function(){
137 Javascript100.scroll({box:"newsbox",list:"newslist",direction:"top",spacing:3000});
138 Javascript100.scroll({box:"probox",list:"prolist",advanceArrow:"left",retreatArrow:"right"});
139 });
140 </script>
141 </body>
142 </html>
