viewer+swiper实现图片轮播点击灯箱放大旋转缩放效果代码-html代码-BFW代码库

viewer+swiper实现图片轮播点击灯箱放大旋转缩放效果代码

代码语言：html

代码描述：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 {
      .........完整代码请登录后点击上方下载按钮下载查看