jquery-backstretch实现登录页面背景图切换

本文链接：https://blog.csdn.net/weixin_40151813/article/details/107237294

backstretch官方地址:
官方地址上有插件的详细使用说明，官方地址：https://github.com/srobbin/jquery-backstretch
1、安装

1-1、从GitHub下载/保存JS文件在页面上直接引入

2-1、npm安装

npm i jquery-backstretch

2、使用：

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

<body>
		<div class="container" style="width: 1000px;height: 500px;"></div>
		<script src="static/js/jquery/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="static/js/backstretch/jquery.backstretch.min.js"></script>
		<script>
			$('.container').backstretch([
				"static/img/login/1.jpg", "static/img/login/2.jpg", "static/img/login/3.jpg", "static/img/login/4.jpg"
			], {
				// Backstretch创建背景图像的幻灯片显示
				fade: 750,
				duration: 4000,
				preload: 1, //Use the lazy-loading functionality
				start: 2 ,//Optional - now starts with "dome.jpg"
				// 背景图像的幻灯片随机过渡
				duration: 4000,
		        transition: 'push_left|push_right|cover_up|cover_down|fade',
		        transitionDuration: 250
			});
		</script>
	</body>

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

<body>
		<div class="container" style="width: 1000px;height: 500px;"></div>
		<script src="static/js/jquery/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="static/js/backstretch/jquery.backstretch.min.js"></script>
		<script>
			$('.container').backstretch([
				"static/img/login/1.jpg", "static/img/login/2.jpg", "static/img/login/3.jpg", "static/img/login/4.jpg"
			], {
				fade: 750,
        		duration: 4000
			});
		</script>
	</body>

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

<body>
		<div class="container" style="width: 1000px;height: 500px;"></div>
		<script src="static/js/jquery/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="static/js/backstretch/jquery.backstretch.min.js"></script>
		<script>
			$('.container').backstretch([
				"static/img/login/1.jpg", "static/img/login/2.jpg", "static/img/login/3.jpg", "static/img/login/4.jpg"
			], {
				duration: 4000,
       		    transition: 'push_left|push_right|cover_up|cover_down|fade',
      			transitionDuration: 250
			});
		</script>
	</body>

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>