jquery-backstretch具有幻灯片显示功能的背景图插件的笔记

1、安装

1-1、从GitHub下载/保存JS文件

https://github.com/jquery-backstretch/jquery-backstretch

2-1、npm安装

npm i jquery-backstretch

2、使用：

2-1、Backstretch幻灯片演示与延迟加载配合使用：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    $.backstretch([
      "pot-holder.jpg",
      "coffee.jpg",
      "dome.jpg"
      ], {
        fade: 750,
        duration: 4000,
        preload: 1, //Use the lazy-loading functionality
        start: 2 //Optional - now starts with "dome.jpg"
    });
</script>

2 -2、Backstretch创建背景图像的幻灯片显示

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    $.backstretch([
      "pot-holder.jpg",
      "coffee.jpg",
      "dome.jpg"
      ], {
        fade: 750,
        duration: 4000
    });
</script>

2-3、背景图像的幻灯片随机过渡

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    $.backstretch([
      "pot-holder.jpg",
      "coffee.jpg",
      "dome.jpg"
      ], {
        duration: 4000,
        transition: 'push_left|push_right|cover_up|cover_down|fade',
        transitionDuration: 250
    });
</script>

4、在vue中应用

<div class="container"></div>

<script>
import '../../node_modules/jquery-backstretch/jquery.backstretch.min.js'
export default {
  name: "home",
  data() {
    return {
    }
  },
  mounted(){
    this.initSwiper()
  },
  methods:{
    initSwiper(){
      console.log($('.container').css('height'))
      $('.container').backstretch([
      "http://b.hi1e41cd/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg",
      "http://b3.jpg",
      "http://f525.jpg"
      ], {
        fade: 750,
        duration: 1000,
        preload: 1, //Use the lazy-loading functionality
        start: 2 //Optional - now starts with "dome.jpg"
    });
  }
  }
};
</script>

 

<style lang="scss">
  .container{
    width: 600px;
    height: 400px;
  }
</style>