自己写的jquery开发的面向对象的左右滚动的幻灯片代码 时间:2013-07-28 22:22:40 来源: 作者: <!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;} 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} .fs_A2{ width: 300px; height: 150px; position: relative; margin: 0px auto; overflow:hidden;background:#000;} .fs_A2 ul{ position:absolute; top:0px; left:0px;} .fs_A2 ul li{ width: 300px; height: 150px; float:left; position:relative;} .fs_A2 ul li i.mark{ background:#000; filter:alpha(opacity=60);opacity:0.6;width:300px; height:30px; display:block;position:absolute; bottom:0px; left:0px;} .fs_A2 ul li span{ position:absolute; bottom:0px; left:8px; line-height:30px; display:block; color:#fff; font-size:14px;} .fs_A2 ul img{width: 100%; height: 150px;} .fs_A2 span.btn{ position:absolute; bottom:6px; right:6px;height:16px; line-height:16px;} .fs_A2 span.btn a{display:inline-block; background:yellow; margin:0px 1px; padding:0 5px; font-family:Arial;} .fs_A2 span.btn a.on,.fs_A2 span.btn a:hover{ background:red; color:#fff;} </style> <div class="fs_A2" id="wind_A2"> <ul> <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" /> <i class="mark">a</i> <span>刑释人员摔死女童?</span> </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" /> <i class="mark"></i> <span>文艺兵被妖魔化了吗</span> </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" /> <i class="mark"></i> <span>蒋介石在抗战期啥</span> </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" /> <i class="mark"></i> <span>后机器生态圈</span> </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" /> <i class="mark"></i> <span>预报温度为疑云</span> </a> </li> </ul> <span id="btn" class="btn cf"> <a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="on">1</a> <a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">2</a> <a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">3</a> <a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">4</a> <a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">5</a> </span> </div> </body> </html>