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            //起始页为上一次的幻灯片
        });
    }
  • 相关阅读:
    cct,web技术
    cct信息安全
    TFS2010安装与管理
    centos7 opera济览器安装
    Hadoop 的常用组件一览
    Exception in thread "main" java.net.BindException: Address already in use: JVM_Bind
    gcc manual
    5350.support
    meminfo,df,
    WCF
  • 原文地址:https://www.cnblogs.com/new0801/p/6176757.html
Copyright © 2011-2022 走看看