您的位置：首页 > 其它

公司项目上的一个需求，说不上来叫什么名字，不过可以用来做一个图片展示。

2010-11-25 16:40 661 查看
公司项目上的一个需求，说不上来叫什么名字，不过可以用来做一个图片展示。

JS：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { padding:0; margin:0;}
ul { list-style:none;}
.clear{ clear:both; height:0; overflow:hidden;}
#outer { width:600px; height:315px; margin:100px auto;}
#box { width:134px; float:left;}
#box a { display:block; height:20px; background:#000; line-height:20px; text-align:center; color:#fff; text-decoration:none; font-weight:bold;}
#thumbnail_box { height:275px; overflow:hidden; position:relative;}
#thumbnail { position:absolute;top:0; left:0; width:134px;}
#thumbnail li { height:91px; background:#CCC; margin-bottom:1px; font-size:50px; font-weight:bold; text-align:center; line-height:91px; cursor:pointer;}
#con { margin-left:139px; background:#000; height:315px;color:#fff; text-align:center; line-height:315px; font-size:50px; position:relative;}
#content {height:315px;}
#con a { width:49%;height:315px; position:absolute;top:0;}
#r_prev { left:0;}
#r_next{right:0;}
</style>
</head>
<body>
<div id="outer">
<div id="box">
<a href="#" title="prev" id="prev">prev</a>
<div id="thumbnail_box">

<ul id="thumbnail">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>

<li>12</li>
</ul>
</div>
<a href="#" title="next" id="next">next</a>
</div>
<div id="con">
<div id="content">1</div>

<a href="#" title="prev" id="r_prev">prev</a>
<a href="#" title="next" id="r_next">next</a>
</div>
</div>
<script type="text/javascript" src="slideShow.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航