zoukankan      html  css  js  c++  java
  • 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="images/mainImg.jpg" alt="">
        <img src="images/mainImg_2.jpg" alt="">
        <img src="images/mainImg_3.jpg" alt="">
        <img src="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            //起始页为上一次的幻灯片
        });
    }
  • 相关阅读:
    文本特殊符号汇集
    十大编程算法助程序员走上高手之路
    单例模式(Singleton)
    flink time and watermark
    关于maven依赖关系的问题
    幂等
    乐观锁和悲观锁的一个例子
    Elasticsearch logstash filter
    ELK filebeat的安装
    使用 Python 验证数据集中的体温是否符合正态分布
  • 原文地址:https://www.cnblogs.com/new0801/p/6176757.html
Copyright © 2011-2022 走看看