站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jQuery Tools tab(幻灯片)
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

jQuery Tools tab(幻灯片)

来源: 易采站长站

html
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>
<!– include the Tools –>
<script src=”http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js”></script>
<link rel=”stylesheet” type=”text/css”
href=”./tabs-slideshow.css”/>
</head>
<body><!– “previous slide” button –>
<a class=”backward”>prev</a>
<!– container for the slides –>
<div class=”images”>
<!– first slide –>
<div>
<h3>First pane</h3>
<p style=”font-weight:bold”>
Aenean nec imperdiet ligula. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Suspendisse potenti. Sed elementum risus eleifend massa
vestibulum consectetur. Duis massa augue, aliquam eget fringilla
vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio neque,
dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis
ligula in ligula faucibus cursus. Quisque vulputate pellentesque
facilisis.
</p>
</div>
<!– second slide –>
<div>
<h3>Second pane</h3>
<p style=”font-weight:bold”>
Consectetur adipiscing elit. Praesent bibendum eros ac
nulla. Integer vel lacus ac neque viverra.
</p>
<p>
Vivamus euismod euismod sagittis. Etiam cursus neque non lectus
mattis cursus et a libero. Vivamus condimentum hendrerit metus,
a sollicitudin magna vulputate eu. Donec sed tincidunt
lectus. Donec tellus lectus, fermentum sit amet porta non,
rhoncus ac mi. Quisque placerat auctor justo, a egestas urna
tincidunt eleifend.
</p>
</div>
<!– third slide –>
<div>
<h3>Third pane</h3>
<p style=”font-weight:bold”>
Non lectus lacinia egestas. Nulla hendrerit, felis quis
elementum viverra, purus felis egestas magna.
</p>
<p>
Aenean elit lorem, pretium vitae dictum in, fermentum consequat
dolor. Proin consectetur sollicitudin tellus, non elementum
turpis pharetra non. Sed quis tellus quam.
</p>
</div>
</div>
<!– “next slide” button –>
<a class=”forward”>next</a>
<!– the tabs –>
<div class=”slidetabs”>
<a href=”#”></a>
<a href=”#”></a>
<a href=”#”></a>
</div>
<div style=”clear:both;margin:30px 0 0;text-align:center;”>
<button onClick=’$(“.slidetabs”).data(“slideshow”).play();’>Play</button>

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -