炫酷的jQuery jquery.windy 快速浏览内容插件

在线实例

效果一

效果二

效果三

使用方法

1. <div class="container">
2.     <section class="main">
3.         <div class="windy-demo">
4.             <ul id="wi-el" class="wi-container">
5.                 <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>
6.                 <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>
7.                 <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>
8.                 <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>
9.                 <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>
10.                 <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>
11.             </ul>
12.             <nav>
13.                 <span id="nav-prev">上一张</span>
14.                 <span id="nav-next">下一张</span>
15.             </nav>
16.         </div>
17.         <p class="info"><strong>提示:</strong> 点击左右按钮看看</p>
18.     </section>
19. </div>
20. <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
21. <script type="text/javascript" src="/api/jq/5733e37417206/js/jquery.windy.js"></script>
22. <script type="text/javascript">
23.     $(function() {
24.         var $el = $('#wi-el'),
25.                 windy = $el.windy(),
26.                 allownavnext = false,
27.                 allownavprev = false;
28.         $('#nav-prev').on('mousedown', function(event) {
29.             allownavprev = true;
30.             navprev();
31.         }).on('mouseup mouseleave', function(event) {
32.             allownavprev = false;
33.         });
34.         $('#nav-next').on('mousedown', function(event) {
35.             allownavnext = true;
36.             navnext();
37.         }).on('mouseup mouseleave', function(event) {
38.             allownavnext = false;
39.         });
40.         function navnext() {
41.             if (allownavnext) {
42.                 windy.next();
43.                 setTimeout(function() {
44.                     navnext();
45.                 }, 150);
46.             }
47.         }
48.         function navprev() {
49.             if (allownavprev) {
50.                 windy.prev();
51.                 setTimeout(function() {
52.                     navprev();
53.                 }, 150);
54.             }
55.         }
56.     });
57. </script>

复制

---

下载