<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>jQuery内容滑块特效 - 网页模板</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.js"></script>
<script type="text/javascript" src="js/lanrenzhijia.js"></script>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="hero-slider">
<ul>
<li><a href="#" rel="#panel-1" class="active" id="01">Item 1</a></li>
<li><a href="#" rel="#panel-2" id="02">Item 2</a></li>
<li><a href="#" rel="#panel-3" id="03">Item 3</a></li>
</ul>
<div class="mask">
<div class="slider-body">
<div class="panel" id="panel-1">
<h2>Lorem Ipsum Sit Dolor</h2>
<p>Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. In condimentum orci id nisl volutpat bibendum. </p>
</div>
<div class="panel" id="panel-2">
<h2>Lorem Ipsum Sit Dolor</h2>
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. </p>
</div>
<div class="panel" id="panel-3">
<h2>Lorem Ipsum Sit Dolor</h2>
<p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
</div>
</div>
</div> <!-- .mask -->
<div class="clear"></div>
</div> <!-- #hero-slider -->
<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>
</body>
</html>
jQuery内容滑块特效 jQuery内容滑块网页特效.zip
版权申诉
64 浏览量
2022-11-21
11:32:51
上传
评论
收藏 32KB ZIP 举报
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+