viewer+swiper实现图片轮播点击灯箱放大旋转缩放效果代码
代码语言:html
所属分类:图片放大
代码描述:viewer+swiper实现图片轮播点击灯箱放大旋转缩放效果代码,支持全屏显示、放大缩小、自动轮播、左右旋转、水平垂直镜像翻转、上下图片切换等效果,非常强大。
代码标签: viewer swiper 图片 轮播 点击 灯箱 放大 旋转 缩放
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=1300"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/viewer.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/viewer.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.4.5.1.js"></script> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, menu, footer, header { margin: 0; padding: 0; border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: normal 14px/24px "Microsoft YaHei" } table { border-collapse: collapse; border-spacing: 0 } fieldset, img { border: 0 } ol, ul { list-style: none } a { text-decoration: none; color: #333; } a:hover { color: #ee7700 } input:focus, textarea:focus { border: 0; outline: 0 } .fl { float: left; } body { background-color: #262626 } .fr { float: right; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m { width:1200px; margin:0 auto } .no-margin { margin-right: 0 !important; } .dasai-sec2 .mySwiper { width: 1200px; height: 350px; overflow: hidden; } .dasai-sec2 .swiper-slide .pic { width: 100%; height: 350px; border-radius: 4px; overflow: hidden; border:10px solid #fff; cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; } .dasai-sec2 .swiper-slide .pic .cover { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 2; width: 100%; left: 0; height: 100%; display: none; } .dasai-sec2 .swiper-slide .pic:hover { border:10px solid #92CD89; } .dasai-sec2 .swiper-slide .pic:hover .cover { display: block; } .dasai-sec2 .swiper-slide .pic .cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; position: absolute; z-index: 4; left: 0; top: 0; } .dasai-sec2 .swiper-slide .pic .cover .icon-imgs { margin-top: 110px; width: 100%; height: 37px; background: url(//repo.bfw.wiki/bfwrepo/icon/5e03fe939f046.png) center no-repeat; display: block; background-size: contain; } .dasai-sec2 .swiper-slide .pic .cover p { text-align: center; width: 100%; font-size: 18px; font-weight: 400; color: #FFFFFF; margin-top: 26px; } .dasai-sec2 .tips { font-size: 14px; color: #8E8C6B; line-height: 36px; margin: 24px 0 15px; } .dasai-sec2 .cont { position: relative; } .dasai-sec2 .cont .swiper-button-next, .dasai-sec2 .cont .swiper-container-rtl .swiper-button-prev { width: 30px; height: 30px; background: url(//repo.bfw.wiki/bfwrepo/icon/6068f15932bf6.png) center no-repeat; top: -20px; right: 0; z-index: 1 } .dasai-sec2 .cont .swiper-button-next:hover, .dasai-sec2 .cont .swiper-container-rtl .swiper-button-prev:hover { width: 30px; height: 30px; background: url(//repo.bfw.wiki/bfwrepo/icon/6068f15932bf6.png) center no-repeat; top: -20px; right: 0; } .dasai-sec2 .cont .swiper-button-next:focus, .dasai-sec2 .cont .swiper-container-rtl .swiper-button-prev:focus { border:0; outline: none; } .dasai-sec2 .cont .swiper-button-prev, .dasai-sec2 .cont .swiper-container-rtl .swiper-button-next { width: 30px; height: 30px; background: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png) center no-repeat; top: -20px; right: auto; left: 1130px; z-index: 1 } .dasai-sec2 .cont .swiper-button-prev:hover, .dasai-sec2 .cont .swiper-container-rtl .swiper-button-next:hover { width: 30px; height: 30px; background: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png) center no-repeat; top: -20px; right: auto; left: 1130px; } .dasai-sec2 .cont .swiper-button-prev:focus, .dasai-sec2 .cont .swiper-container-rtl .swiper-button-next:focus { border:0; outline: none; } </style> </head> <body> <div class="dasai-sec dasai-sec2"> <div class="m"> <p class="tips">--</p> <div class="cont"> <div class="swiper mySwiper"> <div class="swiper-wrapper" id="swiper"> <div class="swiper-slide "> <div class="pic" style="background-image:url('//repo.bfw.wiki/bfwrepo/image/62bb8b9308b60.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_600,/quality,q_90')"> <div class="cover"> <i class=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0