实现这样的轮播图
(练习,参考宇信科技)
<!DOCTYPE html>
<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="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
<style>
.banner {
padding: 6.25vw 0;
background-color: #fff;
font-size: 0;
}
.banner .bot-block {
margin-top: 3.125vw;
position: relative;
}
.banner .bot-block .items {
padding-left: 9.375vw;
padding-right: calc(70.625vw + 24px);
}
.banner .bot-block .item {
position: relative;
overflow: hidden;
width: 18.75vw;
height: 31.25vw;
transition: width .5s ease;
}
.banner .bot-block .item .img-box {
width: 61.25vw;
height: 100%;
position: absolute;
top: 0;
left: 50%;
margin-left: -30.625vw;
z-index: 1;
opacity: .1;
transition: opacity .3s ease;
}
.banner .bot-block .item .show {
position: absolute;
left: 0;
bottom: 0;
width: 18.75vw;
padding: 3.125vw;
font-size: 24px;
line-height: 1.5;
color: #fff;
z-index: 2;
transition: all .3s ease;
}
.banner .bot-block .item .hide {
width: 61.25vw;
height: 100%;
position: absolute;
top: 0;
left: 50%;
margin-left: -30.625vw;
padding: 6.25vw;
z-index: 2;
opacity: 0;
visibility: hidden;
transition: all .3s ease;
}
.banner .bot-block .item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.banner .bot-block .item h3 {
font-size: 24px;
color: #fff;
}
.banner .bot-block .item h3:after {
content: '';
width: 60px;
height: 4px;
display: block;
margin-top: 20px;
background-image: linear-gradient(90deg, #5051f3, #c9449a);
}
.banner .bot-block .item p {
font-size: 16px;
line-height: 2;
color: #ffffff;
margin-top: 15px;
}
.banner .bot-block .item a {
display: block;
position: absolute;
bottom: 6.25vw;
left: 6.25vw;
width: 120px;
font-size: 14px;
line-height: 40px;
color: #5c3e3e;
text-align: center;
background-image: linear-gradient(90deg, #f7b42a, #f29803);
transition: all .3s ease;
}
.banner .bot-block .item a:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3);
}
.banner .bot-block .item:hover img {
transform: scale(1.1);
}
.banner .bot-block .item.swiper-slide-active {
width: 61.25vw;
}
.banner .bot-block .item.swiper-slide-active .show {
opacity: 0;
visibility: hidden;
}
.banner .bot-block .item.swiper-slide-active .hide {
opacity: 1;
visibility: visible;
}
.banner .bot-block .item.swiper-slide-active .img-box, .banner .bot-block .item.swiper-slide-next .img-box {
opacity: 1;
}
.banner .button {
position: absolute;
top: 50%;
margin-top: -30px;
width: 60px;
height: 60px;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
background-image: url("https://www.yusys.com.cn/statics/home/images/index/prev-3.png");
transition: all .3s ease;
cursor: pointer;
z-index: 2;
}
.banner .button:hover {
background-color: #172573;
background-image: url("https://www.yusys.com.cn/statics/home/images/index/prev-4.png");
}
.banner .button-prev {
left: 0;
}
.banner .button-next {
right: 0;
transform: rotateY(180deg);
}
.banner .pagination {
margin-top: 2vw;
text-align: center;
}
.banner .pagination span {
display: inline-block;
vertical-align: top;
width: 24px;
height: 24px;
margin: 0 10px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("https://www.yusys.com.cn/statics/home/images/index/icon-3-1.png");
cursor: pointer;
}
.banner .pagination span.active {
background-image: url("https://www.yusys.com.cn/statics/home/images/index/icon-3-2.png");
animation: o-rotate 10s linear infinite;
}
.banner a.more {
display: block;
position: absolute;
right: 0;
top: 60px;
width: 180px;
font-size: 16px;
line-height: 48px;
color: #5c3e3e;
text-align: center;
background-image: linear-gradient(90deg, #f7b42a, #f29803);
transition: all .3s ease;
}
.banner a.more:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3);
}
</style>
</head>
<body>
<div class="banner">
<div class="bot-block">
<div class="items swiper-container">
<div class="swiper-wrapper">
<div class="item swiper-slide">
<div class="img-box">
<img src="https://www.yusys.com.cn//uploads/images/2020/1222/bxRORO8vZjJjtbwEUcuG93qLtyNA5pdKoSTt1jLz.jpeg" alt="为某头部股份制银行打造数据中台项目">
</div>
<div class="show">为某头部股份制银行打造数据中台项目</div>
<div class="hide">
<h3 class="h3">为某头部股份制银行打造数据中台项目</h3>
<p>该联机开放平台项目是某股份制银行数据中心2020年重点战略项目,将以Open API 的方式对外提供数据服务,建立技术底座,实现对全行提供实时在线的数据产品服务,提升银行的数字化服务能力。</p>
</div>
</div>
<div class="item swiper-slide">
<div class="img-box">
<img src="https://www.yusys.com.cn//uploads/images/2020/1222/mKqQ1R4a1Pdjb02gHeRCcssFqV5z8Jdd7xGnuTRw.jpeg" alt="为某民营银行打造业内首个民营银行数据中台落地案例">
</div>
<div class="show">为某民营银行打造业内首个民营银行数据中台落地案例</div>
<div class="hide">
<h3 class="h3">为某民营银行打造业内首个民营银行数据中台落地案例</h3>
<p>项目将基于阿里大数据平台,并配合新核心项目群进行建设,通过建立一套可持续“让数据用起来”的数据服务体系,将数据资产快速形成服务能力并与业务对接,在业务中产生数据价值,实现数据的服务化和业务化,并发挥银行的数据价值。</p>
</div>
</div>
<div class="item swiper-slide">
<div class="img-box">
<img src="https://www.yusys.com.cn//uploads/images/2020/1222/Xk6Dn2kuJmxKzf09MiZb1R9pHN8fscgQMUkcgUtB.jpeg" alt="青岛银行5G+生态智慧银行项目荣获IDC场景创新大奖">
</div>
<div class="show">青岛银行5G+生态智慧银行项目荣获IDC场景创新大奖</div>
<div class="hide">
<h3 class="h3">青岛银行5G+生态智慧银行项目荣获IDC场景创新大奖</h3>
<p>宇信科技与青岛银行携手打造的山东省首家跨界新金融、新场景的综合金融新业态,具有很强的示范意义。</p>
</div>
</div>
</div>
</div>
<div class="button button-prev"></div>
<div class="button button-next"></div>
</div>
<div class="pagination"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script>
var winWidth = $(window).width();
var indexb = 0;
for (var i = 0; i < $('.banner .item').length; i++) {
$('.banner .pagination').append('<span></span>')
}
$('.banner .pagination span').eq(0).addClass('active')
var indexSwiper5 = new Swiper($('.banner .items'), {
speed: 500,
simulateTouch: false,
slidesPerView: 'auto',
spaceBetween: 24,
watchSlidesProgress: true,
updateOnWindowResize: true,
on: {
init: function () {
},
resize: function () {
this.update()
},
}
});
$('.banner .button-prev').click(function(){
indexb--;
if(indexb < 0) indexb = 0
indexs5Change(indexb)
})
$('.banner .button-next').click(function(){
indexb++;
if(indexb > $('.banner .item').length - 1) indexb = $('.banner .item').length - 1
indexs5Change(indexb)
})
$('.banner .pagination span').click(function(){
indexb = $(this).index();
indexs5Change(indexb)
})
function indexs5Change(indexb){
indexSwiper5.setTransition(500)
indexSwiper5.setTranslate((-0.1875 * winWidth - 24) * indexb)
$('.banner .item').eq(indexb).addClass('swiper-slide-active').siblings().removeClass('swiper-slide-active')
$('.banner .pagination span').eq(indexb).addClass('active').siblings().removeClass('active')
}
</script>
</body>
</html>