HTML+CSS+JS实现 swiper倾斜图片特效
【摘要】 HTML+CSS+JS实现 swiper倾斜图片特效
代码目录：
主要代码实现：
CSS样式：
.img_swiper {
width: 800px;
margin: 0 auto;
position: relative;
}
.img {
width: 100%;
height: 100%;
}
.img_swiper .swiper-button-prev {
width: 40px;
height: 40px;
background-image: url(../img/prev_white.png);
background-size: cover;
/* left: -80px; */
}
.img_swiper .swiper-button-next {
width: 40px;
height: 40px;
background-image: url(../img/next_white.png);
background-size: cover;
/* right: -80px; */
}
.img_swiper .swiper-button-prev.swiper-button-disabled {
background-image: url(../img/prev.png);
background-color: #FFFFFF;
}
.img_swiper .swiper-button-next.swiper-button-disabled {
background-image: url(../img/next.png);
background-color: #FFFFFF;
}
.img_swiper .swiper-slide {
width: 440px;
}
.swiper_slide_img {
/* height: 440px; */
perspective: 300px;
-webkit-perspective: 500;
/* position: absolute; */
margin-left: -240px;
position: relative;
}
.swiper_slide_img:first-child {
margin-left: 0;
}
.swiper_slide_img>img {
width: 360px;
height: 500px;
transform: rotateY(35deg) scale(0.7);
transition: 1s;
border-radius: 20px;
cursor: url('../img/enlarge.png'), default;
}
.swiper_slide_img:hover {
z-index: 1000;
}
.swiper_slide_img:hover img {
transform: rotateY(0deg) scale(1);
transition: 1s;
}
.pic_container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #34353A;
display: none;
z-index: 200;
overflow-y: scroll;
}
.pic_container_inner {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pic_container_inner>img {
width: 100%;
border-radius: 10px;
cursor: url('../img/narrow.png'), default;
}
HTML代码 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播--可翻转、可放大缩小</title>
<link href="css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="img_swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper_slide_img" data-url="img/img1.jpg">
<img src="img/img1.jpg" class="img" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="swiper_slide_img" data-url="img/img2.jpg">
<img src="img/img2.jpg" class="img" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="swiper_slide_img" data-url="img/img3.jpg">
<img src="img/img3.jpg" class="img" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="swiper_slide_img" data-url="img/img4.jpg">
<img src="img/img4.jpg" class="img" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="swiper_slide_img" data-url="img/img5.jpg">
<img src="img/img5.jpg" class="img" alt="">
</div>
</div>
</div>
</div>
<div class="swiper-button-prev one"></div>
<div class="swiper-button-next one"></div>
</div>
<!-- 图片放大 -->
<div class="pic_container">
<div class="pic_container_inner">
<img src="" id="box" style="transform: scale(1.5);" alt="">
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="js/imgZoom.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>上面的图片和js需要引入
源码获取
查看博主主页或私信博主获取
精彩推荐更新中：
打卡 文章 更新 40 / 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）