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 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 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 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 700px; 72 overflow:hidden; 73 height:190px; 74 padding:15px 0; 75 } 76 #prolist{ 77 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>