superSlide显示左右滚动
2015-01-10 17:50
155 查看
不多说，贴代码
查看superSlide插件各种参数的地址http://www.superslide2.com/param.html
<%@ 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{ width:450px;margin-left:20px; position:relative; display:inline; }
.txtScroll-left .hd{ padding:10px; width:430px;hight:300; overflow:hidden;}
.txtScroll-left .prev{ background:url("img/zongh_58.png") no-repeat; display:inline;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
.txtScroll-left .next{ background:url("img/zongh_55.png") no-repeat; display:inline;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
.txtScroll-left .bd{ padding:10px; width:430px;hight:100px; overflow:hidden; display:inline;float:left}
.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;}
</style>
<!--<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;">
<div class="next"></div>
<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">
<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" onclick="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;" onclick="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;" onclick="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;" onclick="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;" onclick="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;" onclick="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;" onclick="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;" onclick="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="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>superSlide这个控件用起来挺简单的，主要是jquery时的一些主要参数要看清楚，以及ul和li的样式要设置清楚。查看superSlide插件各种参数的地址http://www.superslide2.com/param.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 最近在一个外网的网站,困扰了我多天的循环和大家分享下,也做为我以后工作之用.第一种(信息作用循环.实现方式后台时钟在前台循环滚动(左右)显示).
- 怎么让文字从左右滚动显示或者从右到左滚动显示
- ionic 滑动块 ion-slide-box 左右无缝滚动
- iOS 类似股票数据显示的可上下左右滚动TableView
- jquery小图片左右滚动点击小图切换显示大图
- 按钮控制信息左右信息滚动...并有显示信息进度
- js 实现菜单左右滚动显示
- TextView单行显示，文字左右滚动(走马灯效果)实现条件：
- 需求：页面content分为左右两栏，左侧固定定位，滚动显示，右侧亦可滚动查看
- vue+SuperSlide 实现 自动刷新滚动
- jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
- GridView实现一行显示并左右滚动
- android - TextView单行显示...或者文字左右滚动(走马灯效果)
- android - TextView单行显示...或者文字左右滚动(走马灯效果)
- jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
- jquery图片滚动效果插件SuperSlide1.2
- SuperSlide -- “焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”特效集成
- js 实现菜单左右滚动显示示例介绍
- jquer 带左右按钮滚动图片 点击显示大图
- 只 一行显示可左右滚动的文本(UITextField中文限制)