當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/12 HTML 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 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倾斜图片特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java.rmi.server.port
下一篇：没有icon_ICON设计干货来啦~