bxSlider 在网页里添加幻灯片效果

幻灯片效果在网页上很常见，本文介绍用 bxSlider 轻松实现的方法。

bxSlider是什么

bxSlider 是用 JQuery 和 CSS 实现网页中幻灯片效果的工具。可在

http://bxslider.com/

下载到。

制作幻灯片

下载之后，引入 js 和 css 文件，同时 jquery 也是需要的。

加载图片。

<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>

再调用

$('.bxslider').bxSlider();

即可。

制作没有按钮且自动播放的幻灯片

<div class="bxslider">
    <img src="data:images/mainImg.jpg" alt="">
    <img src="data:images/mainImg_2.jpg" alt="">
    <img src="data:images/mainImg_3.jpg" alt="">
    <img src="data:images/mainImg_4.jpg" alt="">
</div>

不用 ul 和 li 的形式也是可以的。

另外，不需要按钮的话，css 就不必引入了，只要 js 文件就好。

其后，

slider = $('.bxslider').bxSlider({
      auto: true,
      autoControls: false,
      pager: false,
      controls: false,
      touchEnabled: true
    });

为使得窗口大小发生变化时，也不影响幻灯片的播放，还需要以下代码

window.onresize = function(){

    var pi = slider.getCurrentSlide();  //获取当前的幻灯片

    slider.destroySlider();     //删除当前幻灯片

    slider = $('.bxslider').bxSlider({ //重新创建幻灯片
      auto: true,
      autoControls: false,
      pager: false,
      controls: false,
      touchEnabled: true,
      startSlide: pi            //起始页为上一次的幻灯片
    });
}