当前位置：网站首页>Swiper rotates pictures and plays background music

Swiper rotates pictures and plays background music

2022-07-30 18:32:00 【letisgo5】

需求：Rotate the pictures in the folder on the browser,并播放音乐！！！

I also found it online at first,All kinds of charges so I thought of a whole,Currently, only carousel and playing music are implemented

效果图： Currently only supports click to start,Then start playing music and carousel pictures

美女1

代码（图片与html在同一目录,If it is not in the same directory, it needs to be adjustedsrc图片路径）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
 
  <!-- Demo styles -->
  <style>
    html, body {
    
      position: relative;
      width: 100%;
      height: 100%;
    }
    body {
    
      margin: 0;
      padding: 0;
    }    
 
    .m-swiper-container{
    width: 100%;}
    .m-swiper-slide{
    display: block; background-size: 100% 100%;}
    .m-swiper-img{
    width: 100%;}
  </style>
</head>
<body>
   <!--bgm-->
  <audio id="myAudio" src="http://music.163.com/song/media/outer/url?id=1901371647.mp3" controls="controls" autoplay loop="true" hidden="true"></audio>
  <button id="goBut">GO!!!!!</button>
  
  <!-- Swiper -->
  <div class="swiper-container m-swiper-container" id="m-swiper-container">
    <div class="swiper-wrapper" id="m-swiper-wrapper"></div>
  </div>
  
  <!-- Swiper JS -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
 
  <!-- Initialize Swiper -->
  <script>
  
	var hdfiles = ['1.png','2.png','3.png'];
  
	 $("#goBut").click(function () {
    
		vMP3 = document.getElementById("myAudio");
		vMP3.play();
		document.getElementById("goBut").style.display = "none";
		
		var swiperWrapper = $('#m-swiper-wrapper');
		var html = '';
		for (var i = 0; i < hdfiles.length; i++) {
    
		  html += '<a class="swiper-slide m-swiper-slide">' +
			'<img src="' + hdfiles[i] + '" class="m-swiper-img">' +
		  '</a>';
		}
		swiperWrapper.html(html);
			var swiper = new Swiper('#m-swiper-container', {
    
			  speed:300,
			  autoplay : {
    
				delay:3000
			  },      
			  loop: true
			});
	});
  </script>
</body>
原网站

版权声明
本文为[letisgo5]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/211/202207301827283961.html

边栏推荐

猜你喜欢

随机推荐