bxSlider图片滚动插件使用。

来源:互联网 发布:照片三维建模软件 编辑:程序博客网 时间:2024/06/13 08:00

bxslider官网:http://bxslider.com/

Why should I use this slider? 我为什么要使用此滑块?

  • Fully responsive - will adapt to any device    充分响应将适应任何设备
  • Horizontal, vertical, and fade modes   水平、垂直和褪色模式
  • Slides can contain images, video, or HTML content    幻灯片可以包含图像、视频或html内容
  • Advanced touch / swipe support built-in    先进的触摸/滑动支持嵌入式

  • Uses CSS transitions for slide animation (native hardware acceleration!)   使用CSS转换幻灯片动画效果
  • Full callback API and public methods   所有的回调API和公共的方法
  • Small file size, fully themed, simple to implement   较小的文件大小、完全主题、简单的实现
  • Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+  浏览器支持:火狐、谷歌、安卓、IE7+

How to install  如何安装?

Step 1: Link required files   连接需要的文件

<!-- jQuery library (served from Google) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- bxSlider Javascript file --><script src="/js/jquery.bxslider.min.js"></script><!-- bxSlider CSS file --><link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Step 2: Create HTML markup   创建HTML标记

<ul class="bxslider">  <li><img src="/images/pic1.jpg" /></li>  <li><img src="/images/pic2.jpg" /></li>  <li><img src="/images/pic3.jpg" /></li>  <li><img src="/images/pic4.jpg" /></li></ul>

Step 3: Call the bxSlider  调出使用

Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){  $('.bxslider').bxSlider();});

0 0
原创粉丝点击