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需要引入

源码获取

查看博主主页或私信博主获取

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 40 / 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️相关推荐

HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡 css部分 *{margin: 0;padding:0;}body{min-height:100vh;overflo ...
HTML+CSS+JS实现 ❤️夜晚云层动画特效❤️
效果演示: 基于css3 keyframes 属性制作乌云密布云层动画,夜晚云层飘过动画特效.可用于网页动态云层背景特效.利用animation 和png云图片制作完成. 代码目录: 主要代码实现: ...
html+css+js实现关键词随机图片
目录前言如何实现? 前端页面 php接口总结电脑为配置php环境怎么办? 写在最后前言前几天我花了一下午的时间搭建好了个人主页,大家可以去看一下->>>皮小孩的个人主页 ...
HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️
效果演示: 代码目录: 主要代码实现: css样式: /*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/@import url( ...
HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️
效果演示: 文末获取源码代码目录: 主要代码实现: HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
HTML+CSS+JS实现 ❤️乐队成员图片展示ui特效❤️
效果演示: 代码目录: 主要代码实现: CSS样式: @charset "utf-8"; /* CSS rest */body {font-size: 12px;font-fami ...
html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果此时的效果是这样的: 分析: 背景颜色图片的位置图片的边框.圆角以及阴影让图片动起来 index.css代码: * ...
如何使用html+css+js 实现动态新年烟花特效及服务器部署
前言不知不觉又到了年底,这一年是值得庆贺的一年,疫情过去,经济好转.我们急需在春节这个特殊的日志释放下自己的情绪.但是大部分地区都不让放炮,于是乎我为大家带来一套十分炫酷应景的春节烟花动画代码实现. ...
HTML+CSS+JS实现 ❤️ 团队人物图片蜂巢布局❤️
代码目录: 主要代码实现: css样式: html, body {height: 100%;margin: auto;--wrp: 800px;width: var(--wrp); }body {ba ...

HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️

效果演示：

代码目录：

主要代码实现：

CSS样式：

HTML代码 :

源码获取

HTML5大作业实战100套

HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️相关推荐

最新文章

热门文章