使用swiper+動畫實現輪播圖自動播放
阿新 • • 發佈：2021-06-15
<!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%;
}