首页 > 代码库 > jQuery jquery.windy 快速浏览内容
jQuery jquery.windy 快速浏览内容
在线实例
效果一 | 效果二 | 效果三 |
使用方法
<div class="container"> <section class="main"> <div class="windy-demo"> <ul id="wi-el" class="wi-container"> <li><img src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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 jquery.windy 快速浏览内容
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。