h5官网使用swiper.js自定义首页轮播

首页效果

功能效果

点击左下角按钮实现轮播切换，中间进度条自动填充，待进度条填满，轮播自动滚动。

代码实现

1.首先引入swiper.min.css 以及swiper.min.js

<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img class="index-banner" src="../img/IndexImg/bannerIndex1.png"
								style="height: 850px;">
							<div class="swiperContext">
								<div class="swiper-title ani" swiper-animate-effect="fadeInUp"
									swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">
									<span>全球40+国家</span>
								</div>
								<div class="swiper-middle ani" swiper-animate-effect="fadeInLeft"
									swiper-animate-duration="1.5s" swiper-animate-delay="0.4s">
									<span>500+国外供应商的首选代理</span>
								</div>
								<div class="swiper-bottom ani" swiper-animate-effect="fadeInLeft"
									swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">
									<span>天津港 / 大连港 / 上海港 / 深圳港 / 广州港 / 青岛港 / 宁波港</span>
								</div>
							</div>
						</div>

						<div class="swiper-slide" style="width: 100%;">
							<!-- <img class="index-banner" src="../img/IndexImg/bannerIndex1.png"> -->
							<video src="../img/vedioIndex.mp4" style="width:100%; height:850px; object-fit: fill"
								loop="loop" muted="muted" autoplay="autoplay"></video>
							<div class="videoContent ">
								<div class="video-top ani" swiper-animate-effect="fadeInUp"
									swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">
									<span>全球冷鲜肉类跨境产业引领者</span>
								</div>
								<div class="video-bottom ani" swiper-animate-effect="fadeInUp"
									swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">
									<p>A LEADER OF GLOBAL COLD MEAT</p>
									<P>CROSS-BORDER INDUSTRY</P>
								</div>

							</div>
						</div>
					</div>
					<div class="slide-dot clearfix">
						<span class="slide-dot-item fl active"></span>
						<span class="slide-dot-item fl"></span>
					</div>
					<div class="canvas-box">
						<canvas id="canvas" width="50" height="50">
							<p>you browser not support canvas!</p>
						</canvas>
						<span class="iconfont icon-xiajiantou jiantou"></span>
					</div>
				</div>

 2.初始化swiper实例

	var mySwiper = new Swiper('.swiper-container', {
				freeMode: true,
				cssMode: true,
				mousewheel: true,
				keyboard: false,
				autoplay: false,
				loop: true,
	});

3. 给左侧按钮绑定点击事件实现切换轮播

$('.slide-dot-item').click(function() {
		var index = $(this).index();
		nowSwiperIndex = index;
		mySwiper.slideToLoop(index, 1000, false); //调用swiper自带滚动方法
		$(this).addClass('active').siblings().removeClass('active')
})

4.中间进度条实现

html代码：
<div class="canvas-box">
	<canvas id="canvas" width="50" height="50">
		<p>you browser not support canvas!</p>
	</canvas>
	<span class="iconfont icon-xiajiantou jiantou"></span>
</div>

var nowSwiperIndex = 0
var canvas = document.getElementById('canvas'), //获取canvas元素
				context = canvas.getContext('2d'), //获取画图环境，指明为2d
				centerX = canvas.width / 2, //Canvas中心点x轴坐标
				centerY = canvas.height / 2, //Canvas中心点y轴坐标
				rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
				speed = 1; //加载的快慢就靠它了

			//绘制白色外圈
			function whiteOutCircle(n) {
				context.save();
				context.beginPath();
				context.strokeStyle = "#fff";
				context.lineWidth = 3;
				context.arc(centerX, centerY, 22, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
				context.stroke();
				context.restore();
			}

			//绘制白色内圈
			function whiteInCircle() {
				context.save();
				context.beginPath();
				context.strokeStyle = "rgba(255,255,255,0.3)";
				context.lineWidth = 3;
				context.arc(centerX, centerY, 22, 0, Math.PI * 2, false);
				context.stroke();
				context.closePath();
				context.restore();
			}

			//百分比文字绘制
			function text(n) {
				context.save();
				context.fillStyle = "#F47C7C";
				context.font = "40px Arial";
				context.textAlign = "center";
				context.textBaseline = "middle";
				// context.fillText(n.toFixed(0) + "%", centerX, centerY);
				context.restore();
			}

			//动画循环
			function drawFrame() {
				window.requestAnimationFrame(drawFrame, canvas);
				context.clearRect(0, 0, canvas.width, canvas.height);

				whiteInCircle();
				text(speed);
				whiteOutCircle(speed);

				if (speed > 100) {
					if (nowSwiperIndex == 1) {
						mySwiper.slideToLoop(0, 1000, false); //切换到第一个slide，速度为1秒
						nowSwiperIndex = 0;
						$('.slide-dot-item').eq(nowSwiperIndex).addClass('active').siblings().removeClass('active')
					} else {
						mySwiper.slideNext();
						nowSwiperIndex++;
						$('.slide-dot-item').eq(nowSwiperIndex).addClass('active').siblings().removeClass('active')
					}
					speed = 0
				} else {
					speed += .3;
				}
			};