话不多说,贴上自己的代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML >
<html ><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtScroll-left .hd{position:absolute; padding:10px; width:430px;hight:300; overflow:hidden;}
.txtScroll-left .prev{position:absolute;background:url("img/zongh_58.png") no-repeat;background-position:center center;display:inline;width:30px;height:40px; float:left; left:470px;top:30px; cursor:pointer;background-color:#EAEDF2;opacity: 0.7;filter:alpha(opacity=70)}
.txtScroll-left .next{position:absolute;background:url("img/zongh_55.png") no-repeat;background-position:center center;display:inline;width:30px;height:40px; float:left; left:10px;top:30px; cursor:pointer;background-color:#EAEDF2;opacity: 0.7;filter:alpha(opacity=70)}
.txtScroll-left .bd{ padding:10px; width:430px;hight:100px; overflow:hidden; display:inline;float:left;z-index:2;}
.txtScroll-left .bd ul{ overflow:hidden; zoom:1; }
.txtScroll-left .bd ul li{ margin-right:20px; float:left; height:24px; line-height:24px; text-align:left; _display:inline;}
.content_div{width: 92%;height: 100%;float: left;}
.card_content_change{border:1px solid #EAEDF2;background-color:blue}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".li").mouseenter(function(){
$(this).addClass("card_content_change");
});
$(".li").mouseleave(function(){
$(this).removeClass("card_content_change");
});
});
</script>
<!--<div class="txtScroll-left">
<div class="next"></div>
<div class="bd">
<ul class="infoList">
<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
</ul>
</div>
<div class="prev"></div>
</div> -->
<div class="content_div" style="overflow: auto;">
<div style="height:150px; width:49%;">
<div style="width:100%;height:20%;background-color:#EAEDF2;"><div style="font-size: 14px;padding: 5px;">入院记录</div></div>
<div style="width:100%;height:80%;background-color:white;">
<div style="width:100%;height:10%;"></div>
<div class="txtScroll-left" style="width:100%;height:90%;background-color:white;position:relative">
<div class="bd" style="width:80%;height:100%;overflow: hidden;float:left;display:inline;">
<ul class="infoList" style="height:100px">
<li style="list-style-type:none;">
<div style="width:110px;height:80px;float:left;background-color:#F5F6FB;">
<div class="li" style="float:left;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录1</div></div>
</div>
<div style="float:left;width:10px;height:100%;"></div>
</div>
</li>
<li style="list-style-type:none;">
<div style="width:110px;height:80px;float:left">
<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录2</div></div>
</div>
<div style="float:left;width:10px;height:100%;"></div>
</div>
</li>
<li style="list-style-type:none;">
<div style="width:110px;height:80px;float:left">
<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录3</div></div>
</div>
<div style="float:left;width:10px;height:100%;"></div>
</div>
</li>
<li style="list-style-type:none;">
<div style="width:110px;height:80px;float:left">
<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录4</div></div>
</div>
<div style="float:left;width:10px;height:100%;"></div>
</div>
</li>
<li style="list-style-type:none;">
<div style="width:110px;height:80px;float:left">
<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录5</div></div>
</div>
<div style="float:left;width:10px;height:100%;"></div>
</div>
</li>
<li style="list-style-type:none;">
<div style="width:110px;height:80px;float:left">
<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录6</div></div>
</div>
<div style="float:left;width:10px;height:100%;"></div>
</div>
</li>
<li style="list-style-type:none;">
<div style="width:110px;height:80px;float:left">
<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录7</div></div>
</div>
<div style="float:left;width:10px;height:100%;"></div>
</div>
</li>
<li style="list-style-type:none;">
<div style="width:110px;height:80px;float:left">
<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录8</div></div>
</div>
<div style="float:left;width:10px;height:100%;"></div>
</div>
</li>
</ul>
</div>
<div class="next" ></div>
<div class="prev" ></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(".txtScroll-left").slide({mainCell:" .bd ul",autoPage:true,effect:"left",scroll:1,vis:4,trigger:"click"});
</script>
</body>
</html>
关于superSilde的一些参数
可以参考:http://www.superslide2.com/param.html