分享一款简单而又强大的的自适应幻灯播放特效

2012.11.25 分享 10662 人浏览 1 条留言

今天突然看到一款很不错的自适应幻灯插件效果，在这里分享下。

首先是效果截图啦。

这是我在1366*768分辨率查看的效果

这是我在缩小显示器屏幕下查看该幻灯的效果，完美的实现了自适应效果

下面就是使用方法了。

1、js部分

当然先引用jq库

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

如后是核心js部分，你可以通过以下链接直接调用

  1. <script type="text/javascript" src="http://x.papaapp.com/farm1/2893f5/9bf8271e/jquery.bxslider.min.js"></script>

2、css部分你也可以通过以下方式直接调用

  1. <link rel="stylesheet" type="text/css" href="http://x.papaapp.com/farm1/2893f5/7caf1566/jquery.bxslider.css" />

3、div部分

  1. <ul class="bxslider">
  2. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095332TyC.png" /></li>
  3. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg" /></li>
  4. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095336QKA.jpg" /></li>
  5. </ul>

此处放上你自己要展示的图片就行了

4、使js效果生效

  1. $(document).ready(function(){
  2.     $('.bxslider').bxSlider({
  3.         autoHover: true,
  4.         auto: true,
  5.     });
  6. });

扩展

标题文字效果

暂停播放效果，如图

多屏效果

整体代码以及扩展配置如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>自适应幻灯效果</title>
  6. <script type="text/javascript" src="http://x.papaapp.com/farm1/2893f5/61551013/jquery-1.8.2.min.js"></script>
  7. <script src="http://x.papaapp.com/farm1/2893f5/9bf8271e/jquery.bxslider.min.js"></script>
  8. <script src="http://x.papaapp.com/farm1/ddd78f/6516449e/A0E25.js"></script><!-- 晃动效果js -->
  9. <link href="http://x.papaapp.com/farm1/2893f5/7caf1566/jquery.bxslider.css" rel="stylesheet" />
  10. </head>
  11. <body>
  12. <ul class="bxslider1">
  13. <li><a href="https://huilang.me/simple-slider-adapt" target="_blank"><img src="https://huilang.me/wp-content/uploads/2013/08/095332TyC.png" title="标题1"/></a></li><!-- 加入链接演示 -->
  14. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg" title="标题2"/></li>
  15. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095336QKA.jpg" title="标题3"/></li>
  16. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg" title="标题4"/></li>
  17. </ul>
  18. <ul class="bxslider2">
  19. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095332TyC.png" title="标题1"/></li>
  20. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg" title="标题2"/></li>
  21. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095336QKA.jpg" title="标题3"/></li>
  22. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg" title="标题4"/></li>
  23. </ul>
  24. <ul class="bxslider3">
  25. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095332TyC.png"/></li>
  26. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg"/></li>
  27. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095336QKA.jpg"/></li>
  28. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg"/></li>
  29. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095332TyC.png"/></li>
  30. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg"/></li>
  31. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095336QKA.jpg"/></li>
  32. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg"/></li>
  33. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095332TyC.png"/></li>
  34. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg"/></li>
  35. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095336QKA.jpg"/></li>
  36. <li><img src="https://huilang.me/wp-content/uploads/2013/08/095334gM5.jpg"/></li>
  37. </ul>
  38. <br>
  39. 本幻灯效果由<a href="https://huilang.me/" title="记忆碎片">记忆碎片</a>整理分享<br>原文地址<a href="https://huilang.me/simple-slider-adapt" title="_blank">分享一款简单的自适应幻灯播放特效</a>
  40. <script type="text/javascript">
  41. $('.bxslider1').bxSlider({
  42. adaptiveHeight: true,//高度自适应
  43. mode: 'vertical',//模式，多屏时此处关闭 可选参数为fade,vertical
  44. captions: false,//启用标题
  45. auto: true,//自动播放
  46. autoControls: false,//播放控制
  47. slideMargin: 10,//幻灯边距
  48. });
  49. $('.bxslider2').bxSlider({
  50. adaptiveHeight: false,//高度自适应
  51. mode: 'vertical',//模式，多屏时此处关闭 可选参数为fade,vertical
  52. captions: true,//启用标题
  53. auto: true,//自动播放
  54. autoControls: true,//播放控制
  55. slideMargin: 10,//幻灯边距
  56. easing: 'easeOutElastic',//晃动效果
  57. });
  58. $('.bxslider3').bxSlider({
  59. minSlides: 2,//最少屏
  60. maxSlides: 3,//最多屏
  61. slideWidth: 170,//幻灯图片宽度
  62. slideMargin: 10
  63. auto: true,
  64. moveSlides: 1,//每次移动张数
  65. autoControls: false,
  66. });
  67. </script>
  68. </body>
  69. </html>

浏览器兼容：Firefox, Chrome, Safari, iOS, Android, IE7+

PS：js css 以及图片等均为点点服务器托管，如果非点点用户使用，最好把资源放置于自己服务器下调用，调用更加快速稳定

下载地址：http://pan.baidu.com/share/link?shareid=109398&uk=3156279266

说明：js来自网络，教程本站原创，转载注明出处

搞定收工...

文章地址：https://huilang.me/simple-slider-adapt/

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif