自己写的jquery开发的面向对象的有按钮水平可停止滚动的横向滚动代码 时间:2013-07-28 22:47:00 来源: 作者: <!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <style type="text/css"> body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select{margin:0;padding:0;} body{font:12px "宋体","Arial Narrow",HELVETICA;-webkit-text-size-adjust:100%; color:#333;} a{text-decoration:none;color:#333;} a:hover{text-decoration:none; color:#c00;} em{font-style:normal;} li{list-style:none;} img{border:0;vertical-align:middle;} table{border-collapse:collapse;border-spacing:0;} p{word-wrap:break-word;} .cf:after{content:"";display:table;clear:both;} .cf{*zoom:1;} .fl{ float:left; _display:inline} .fr{ float:right; _display:inline} .windS1{ width:970px; position:relative; height:190px;} .windS1 .w{ width:920px; overflow:hidden; position:absolute; top:0px; left:26px; height:190px;} .windS1 ul{ position:absolute; top:0px; left:0px;width:9999px;} .windS1 ul li{ float:left; width:310px; overflow:hidden; text-align:center; font-size:14px;} .windS1 ul li img{ display:block; padding-bottom:13px;} .windS1 a.prev,.windS1 a.next{ position:absolute; top:50px; display:block; width:20px; height:20px;background:red;} .windS1 a.prev{ left:0px;} .windS1 a.next{right:0px;} </style> <div class="windS1" id="windS1"> <div class="w"> <ul id="windS1Ul"> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/ln_xqnj.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/ln_xqnj.jpg" /> 刑释人员摔死女童? </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_ybj.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_ybj.jpg" /> 文艺兵被妖魔化了吗 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_xqnj.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_xqnj.jpg" /> 蒋介石在抗战期啥 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" /> 后机器生态圈 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" /> 预报温度为疑云 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" /> 后机器生态圈 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" /> 预报温度为疑云 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" /> 后机器生态圈 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" /> 预报温度为疑云 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" /> 后机器生态圈 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" /> 预报温度为疑云 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" /> 后机器生态圈 </a> </li> <li> <a href="#" _fcksavedurl="#" target="_blank"> <img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" /> 最后一张 </a> </li> </ul> </div> <a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" _fcksavedurl="javascript:void(0)" id="prev" class="prev">左</a> <a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" _fcksavedurl="javascript:void(0)" id="next" class="next">右</a> </div> </body> </html>