使用swiper+动画实现轮播图自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="swiper-6.6.2/swiper-master/package/swiper-bundle.css">
<link rel="stylesheet" href="swiper-6.6.2/swiper-master/package/swiper-bundle.min.css">
<script src="swiper-6.6.2/swiper-master/package/swiper-bundle.js"></script>
<script src="swiper-6.6.2/swiper-master/package/swiper-bundle.min.js"></script> -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
</head>
<body>
<!-- 用来盛整体内容的盒子 -->
<div class="swiper-container container">
<div class="header">
<div class="headContent">我是轮播图</div>
</div>
<!-- 用来盛轮播图的盒子 -->
<div class="swiper-wrapper">
<!-- 用来盛轮播图图片的盒子 -->
<div class="swiper-slide">
<img class="moveImg" src="./image/logo1.jpg" alt="">
</div>
<div class="swiper-slide">
<img class="moveImg" src="./image/logo2.jpg" alt="">
</div>
</div>
<!-- 轮播图的下一页按钮 -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 轮播图的上一页按钮 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- 轮播图的底下的导航小点点按钮 -->
<!-- <div class="swiper-pagination"></div> -->
<div class="foot">
<div class="footImg">
<img class="footImgStyle" src="./image/logoWhite.png">
</div>
<div class="footContent">版权所有 山ICP备160577863号</div>
</div>
</div>
<script>
var ishidden=true
var swiper = new Swiper(".container", {
//绑定上下页切换按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
//设置自动轮播切换
loop: true,
speed:2500,
autoplay: {
delay: 4000,
disableOnInteraction: false,
waitForTransition: false,
},
disableOnInteraction: true,
//设置图片切换的形式
// effect : 'flip',
effect : 'fade',
fadeEffect: {
crossFade: true,
},
//添加分页小点点按钮功能
pagination: {
el: ".swiper-pagination",
clickable: true,
}
})
//鼠标移入时停止自动轮播
document.querySelector(".container").onmouseover = function () {
// swiper.autoplay.stop();
}
//鼠标移出时开始自动轮播
document.querySelector(".container").onmouseout = function () {
// swiper.autoplay.start();
}
//给分页小点点按钮绑定事件
for (var i = 0; i < swiper.pagination.bullets.length; i++) {
swiper.pagination.bullets[i].onmouseover = function () {
this.click();
}
}
</script>
<style>
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
/* 动画缩放 */
@keyframes imgmove1 {
0% {
transform:scale(1);
/*开始为原始大小*/
}
50% {
transform:scale(1.1);
}
100% {
transform:scale(1);
}
}
.moveImg {
/* 动画名称 */
animation-name: imgmove1;
/* 动画花费时长 */
animation-duration: 16s;
/* 动画速度曲线 */
/* animation-timing-function: ease-in-out; */
/* 动画等待多长时间执行 */
animation-delay: 1s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
/* animation-direction: alternate; */
/* 动画结束之后的状态 */
animation-fill-mode: none;
/* animation-fill-mode: forwards; */
}
.header{
position: absolute;
left: 0;
top: 9%;
width: 100%;
height: 60px;
margin: 0 auto;
z-index: 12;
color: white;
}
.headContent{
text-align: center;
line-height: 60px;
/* font-size: xx-large; */
font-size:2vw;
font-weight: bold;
}
.foot{
position: absolute;
left: 0;
bottom: 9%;
width: 100%;
height: 60px;
margin: 0 auto;
z-index: 12;
color: white;
}
.footImg{
/* width: 200px; */
width: 12%;
margin: 0 auto;
}
.footImgStyle{
width: 100%;
}
.footContent{
/* font-size: 13px; */
font-size: 0.8vw;
text-align: center;
margin-top: 10px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
color: black;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
color: black;
}
</style>
</body>
</html>
1. 轮播图播放的同时放大/缩小 @keyframes
2.支持图片宽度同窗口等比例缩放, 容器宽度设为100%
设置:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
样式:
.container {
width: 100%;
height: 100%;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
3.支持图片高度自适应窗口,让所有元素的高度设为100%,从html开始,包括body
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
