1、轮播图需要响应式， 图片在移动端和pc端要正常显示
2、使用的是swiper插件
- 官方网站下载好swiper.mini.js 和swiper.js 并且引入项目中
- 重点是在 slide-wrap 设置
display: flex;
justify-content: center;
align-items: center; - img 设置 object-fit: contain;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./swiper.min.css">
<style type="text/css">
body,
html {
font-size: 16px;
margin: 0;
padding: 0;
}
.slide-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.slide-wrap img {
object-fit: contain;
width: 100%;
height: 100%;
}
.introdution {
position: absolute;
width: 80%;
color: #ffffff;
}
.introdution h2 {
font-size: 20px;
text-shadow: 0 0 10px #000000;
}
.introdution p {
font-size: 12px;
text-shadow: 0 0 10px #000000;
}
@media (min-width: 500px) {
.introdution {
width: 80%;
}
.introdution h2 {
font-size: 30px;
text-shadow: 0 0 10px #000000;
}
.introdution p {
font-size: 16px;
text-shadow: 0 0 10px #000000;
}
}
@media (min-width: 700px) {
.introdution {
width: 60%;
}
.introdution h2 {
font-size: 40px;
text-shadow: 0 0 10px #000000;
}
.introdution p {
font-size: 20px;
text-shadow: 0 0 10px #000000;
}
}
</style>
</head>
<body>
<div class="">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-wrap">
<img src="./beermeet.png" alt="">
<div class="introdution">
<div style="width: 30%;">
<h2>IROW MAN</br>钢铁侠</h2>
<p>vjjshdfhsihsnkdvdhdbjdvjbdbvdbpshsihihi</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</body>
</html>
<script src="./jquery-1.10.2.min.js"></script>
<script src="./swiper.min.js"></script>
<script>
$(function () {
//======轮播图初始化====
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 水平切换选项
loop: true, // 循环模式选项
autoplay: {
autoplay: true, //自动播放
delay: 5000, //自动切换的时间间隔，单位ms
disableOnInteraction: false, //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
})
</script>
网友评论