Unslider最棒的jQuery轮播插件|511遇见强烈推荐

1 跨浏览器

Unslider已经在所有最新的浏览器上测试过了,并且对那些老旧的浏览器也能很出色的降级处理。

2 支持键盘导航

如果需要,可以加入键盘方向键导航。试一试左右方向键吧!

3 自动调整高度

并不是每个幻灯片都很规范,Unslider能够自动调整高度。

4 支持响应式布局

如今哪个网站还不支持响应式布局就已经非常OUT了。Unslider帮你轻松搞定!

1、如何使用Unslider
要使用Unslider,你需要确保两个Unslider和jQuery脚本都包括在内。如果你已经有jQuery的(你可以打开你的JavaScript控制台和打字测试!window.jQuery -如果说真的,你有jQuery的),你并不需要添加的第一行。

  1. <script src="//code.jquery.com/jquery-latest.min.js"></script>
  2. <script src="//unslider.com/unslider.js"></script>

2、准备HTML代码
Unslider不需要任何真正尴尬的标记。事实上,所有你需要的是一个DIV和无序列表。一些Unslider友好的HTML的一个例子是在右边。

  1. <div class="banner">
  2.     <ul>
  3.         <li>This is a slide.</li>
  4.         <li>This is another slide.</li>
  5.         <li>This is a final slide.</li>
  6.     </ul>
  7. </div>

3、Make it pretty

  1. .banner { position: relative; overflow: auto; }
  2.     .banner li { list-style: none; }
  3.         .banner ul li { float: left; }

4、参数

  1. $('.banner').unslider({
  2. 	speed: 500,               //  The speed to animate each slide (in milliseconds)
  3. 	delay: 3000,              //  The delay between slide animations (in milliseconds)
  4. 	complete: function() {},  //  A function that gets called after every slide animation
  5. 	keys: true,               //  Enable keyboard (left, right) arrow shortcuts
  6. 	dots: true,               //  Display dot navigation
  7. 	fluid: false              //  Support responsive design. May break non-responsive designs
  8. });

5、添加向前(previous)/向后(next)链接

  1. <!-- The HTML -->
  2. <a href="#" class="unslider-arrow prev">Previous slide</a>
  3. <a href="#" class="unslider-arrow next">Next slide</a>
  4.  
  5. <!-- And the JavaScript -->
  6. <script>
  7.     var unslider = $('.banner').unslider();
  8.  
  9.     $('.unslider-arrow').click(function() {
  10.         var fn = this.className.split(' ')[1];
  11.  
  12.         //  Either do unslider.data('unslider').next() or .prev() depending on the className
  13.         unslider.data('unslider')[fn]();
  14.     });
  15. </script>

6、存取Unslider的属性

  1. var slidey = $('.banner').unslider(),
  2.     data = slidey.data('unslider');
  3.  
  4. //  Start Unslider
  5. data.start();
  6.  
  7. //  Pause Unslider
  8. data.stop();
  9.  
  10. //  Move to a slide index, with optional callback
  11. data.move(2, function() {});
  12. //  data.move(0);
  13.  
  14. //  Manually enable keyboard shortcuts
  15. data.keys();
  16.  
  17. //  Move to the next slide (or the first slide if there isn't one)
  18. data.next();
  19.  
  20. //  Move to the previous slide (or the last slide if there isn't one)
  21. data.prev();
  22.  
  23. //  Append the navigation dots manually
  24. data.dots();

百度网盘下载 点击预览


发布日期:

所属分类: JavaScript/jquery, 前端 标签: