在线实例
使用方法
- <div class="container">
- <section class="main">
- <div class="windy-demo">
- <ul id="wi-el" class="wi-container">
- <li><img src="/api/jq/5733e37417206/images/demo1/1.jpg" alt="/api/jq/5733e37417206/image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
- <li><img src="/api/jq/5733e37417206/images/demo1/2.jpg" alt="/api/jq/5733e37417206/image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
- <li><img src="/api/jq/5733e37417206/images/demo1/3.jpg" alt="/api/jq/5733e37417206/image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
- <li><img src="/api/jq/5733e37417206/images/demo1/4.jpg" alt="/api/jq/5733e37417206/image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
- <li><img src="/api/jq/5733e37417206/images/demo1/5.jpg" alt="/api/jq/5733e37417206/image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
- <li><img src="/api/jq/5733e37417206/images/demo1/6.jpg" alt="/api/jq/5733e37417206/image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
- </ul>
- <nav>
- <span id="nav-prev">上一张</span>
- <span id="nav-next">下一张</span>
- </nav>
- </div>
- <p class="info"><strong>提示:</strong> 点击左右按钮看看</p>
- </section>
- </div>
- <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
- <script type="text/javascript" src="/api/jq/5733e37417206/js/jquery.windy.js"></script>
- <script type="text/javascript">
- $(function() {
- var $el = $('#wi-el'),
- windy = $el.windy(),
- allownavnext = false,
- allownavprev = false;
- $('#nav-prev').on('mousedown', function(event) {
- allownavprev = true;
- navprev();
- }).on('mouseup mouseleave', function(event) {
- allownavprev = false;
- });
- $('#nav-next').on('mousedown', function(event) {
- allownavnext = true;
- navnext();
- }).on('mouseup mouseleave', function(event) {
- allownavnext = false;
- });
- function navnext() {
- if (allownavnext) {
- windy.next();
- setTimeout(function() {
- navnext();
- }, 150);
- }
- }
- function navprev() {
- if (allownavprev) {
- windy.prev();
- setTimeout(function() {
- navprev();
- }, 150);
- }
- }
- });
- </script>
云盘内容
文件
| jQuery插件大全打包
|
内容
| HTML5+CSS3+PHP+jQuery等示例
|
大小
| 170M(300+个文件)
|
注意:示例只是当前的内容,【下载】的是全部jQuery插件一起打包后的文件。