<!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=gb2312" />
<title>jquery纵向幻灯片选项卡 - 网页模板</title>
<script src="js/jquery.js"></script>
<script src="js/featuredbox.js"></script>
<script>
$(document).ready(function() {
$("#example1").featuredbox({width: 440,
height: 300,
slidesAnimation: "slide-left",
slidesSpeed: "slow",
descriptionAnimation: "slide-right",
descriptionSpeed: "slow",
rotateInterval: 0});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style >
body {
text-align: center;
background-image: url(images/bg.jpg);
color:#FFF;
font-family:Georgia, serif;
font-size:14px;
line-height:18px;
}
h1 {
color:#FFF;
font-size:32px;
margin:0 0 20px;
}
p {
line-height:18px;
padding: 6px 0px 12px 0px;
text-align: justify;
}
#box-wrap {
text-align: left;
margin: 50px auto;
width: 620px;
}
.border {
padding: 10px;
background:transparent url(images/bg.png) repeat scroll 0 0;
border-top: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #414141;
border-bottom: solid 1px #414141;
}
.spacer {
clear: both;
}
.small {
font-style: italic;
font-size: 12px;
padding: 4px 0px 14px 0px;
}
</style>
</head>
<body>
<div id="content">
<!--DEMO start-->
<div id="box-wrap">
<h1>Featured Box 2</h1>
<p>On this page you can see an example of how you can place the navigation part wherever you want. In this example we created a box to highlight products. This can be used for example in a webshop.</p>
<div class="border">
<div class="featuredbox-wrapper" id="example1">
<ul>
<li>
<img src="images/slide1.jpg" alt="Slide 1" />
<div><a href="#">Order this item now</a></div>
<div>Feature slide 1</div>
</li>
<li>
<img src="images/slide2.jpg" alt="Slide 2" />
<div><a href="#">Order this item now</a></div>
<div>Feature slide 2</div>
</li>
<li>
<img src="images/slide3.jpg" alt="Slide 3" />
<div><a href="#">Order this item now</a></div>
<div>Feature slide 3</div>
</li>
<li>
<img src="images/slide4.jpg" alt="Slide 4" />
<div><a href="#">Order this item now</a></div>
<div>Feature slide 4</div>
</li>
<li>
<img src="images/slide5.jpg" alt="Slide 5" />
<div><a href="#">Order this item now</a></div>
<div>Feature slide 5</div>
</li>
<li>
<img src="images/slide6.jpg" alt="Slide 6" />
<div><a href="#">Order this item now</a></div>
<div>Feature slide 6</div>
</li>
</ul>
</div>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
<div class="spacer">
<!-- SPACER -->
</div>
</div>
<!--DEMO end-->
</div>
</body>
</html>
jquery纵向幻灯片选项卡.zip （17个子文件） 
jquery纵向幻灯片选项卡 jiaoben453 images 
slide1.jpg 48KB inactive.jpg 1KB
background.html 438B slide4.jpg 29KB active.jpg 518B
bg.png 503B slide6.jpg 31KB slide3.jpg 33KB navhover.png 220B slide2.jpg 39KB bg.jpg 76KB slide5.jpg 38KB index.html 3KB js 
jquery.js 56KB featuredbox.js 12KB style.css 4KB jquery纵向幻灯片选项卡.jpg 62KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
