js——视频图片轮播

迈不过友情╰ 2022-04-23 10:20 271阅读 0赞

# <table>   <tbody>    <tr>     <td align="left"><font>*前言 </font></td>    </tr>   </tbody>  </table> #

近期接触的模仿淘宝评论的功能，难点主要就在视频和图片的轮播，主要是前端处理img和video标签的交替使用，轮播时如何准确获取当前浏览的图片还是视频的地址。这块听上去感觉不复杂，但真正在做处理的时候还是有点复杂的，也走了很多坑，下面简单分享一下。

# <table>   <tbody>    <tr>     <td align="left"><font>*html </font></td>    </tr>   </tbody>  </table> #

<html style="height: auto; min-height: 100%;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <link rel="stylesheet" href="css/test.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/test.js"></script>
    
        <title>图片视频轮播</title>
    </head>
    <body style="height: auto; min-height: 100%;">
    <div class="panel panel-default">
    
            <div>
                
                <div class="tm-m-photos">
                    <ul class="tm-m-photos-thumb">
                        <li data-src="http://pingjia.alicdn.com/jboeRVxjr3A8UBHkS7D/VGC0WVIJJ30oh7edEhb.mp4%40%40hd.mp4"><img src="img/video.png"> <b class="tm-photos-arrow"></b></li>
                        <li data-src="img/01.png"><img src="img/01.png"> <b class="tm-photos-arrow"></b></li>
                        <li data-src="http://pingjia.alicdn.com/jboeRVxjr3A8UBHkS7D/VGC0WVIJJ30oh7edEhb.mp4%40%40hd.mp4"><img src="img/video.png"> <b class="tm-photos-arrow"></b></li>
                        <li data-src="img/03.png"><img src="img/03.png"> <b class="tm-photos-arrow"></b></li>
                    </ul>
                    <div class="tm-m-photo-viewer">
                        <img src="img/01.png">
                        <video  controls="controls" class="videoBox" style="height: 400px;width: 450px;" autoplay="autoplay"></video>
                        <a class="tm-m-photo-viewer-navleft"><i></i></a>
                        <a class="tm-m-photo-viewer-navright"><i></i></a>
                    </div>
                </div>
                <hr/>
            </div>
    </div>
    
    <script>
        $(function () {
            $(".tm-m-photos").commentImg({
                activeClass: 'tm-current', //缩略图当前状态class,默认'current'
                nextButton: '.tm-m-photo-viewer-navright', //向后翻页按钮，默认'.next'
                prevButton: '.tm-m-photo-viewer-navleft', //向前翻页按钮，默认'.prev'
                imgNavBox: '.tm-m-photos-thumb', //缩略图容器，默认'.photos-thumb'
                imgViewBox: '.tm-m-photo-viewer' //浏览图容器，默认'.photo-viewer'
            });
        })
    </script>
    </body>
    </html>

# <table>   <tbody>    <tr>     <td align="left"><font>*css </font></td>    </tr>   </tbody>  </table> #

ul { padding: 0; }
    .tm-m-photos, .tm-m-photos-thumb { zoom: 1; }
    .tm-m-photos-thumb { margin: 10px 0; list-style-type: none; height: 85px; }
    .tm-m-photos-thumb li { float: left; border: 2px solid #f2f2f2; padding: 2px; margin-right: 8px; position: relative; transition: border-color .2s ease-out;
    }
    .tm-m-photos-thumb .tm-current { border: 2px solid #f23d6a; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; cursor: auto; }
    .tm-photos-arrow { width: 0; height: 0; line-height: 0; font-size: 0; border: 6px dashed transparent; border-top: 6px solid #f23d6a; position: absolute; left: 15px; filter: alpha(opacity=0); opacity: 0; bottom: -12px; background: 0 0; }
    .tm-current .tm-photos-arrow { filter: alpha(opacity=100); opacity: 1; }
    .tm-m-photos-thumb img { display: block; width: 80px; height: 80px; cursor: url(../img/T1nTBDFCRbXXbzTk_b-25-20.png), url(http://assets.alicdn.com/img/common/zoom_in.cur), auto; }
    .tm-m-photo-viewer, .tm-m-photo-viewer img, .tm-m-photos-thumb .tm-current img { cursor: url(../img/T1oq4AFupvXXcu5FDa-20-20.png), url(http://assets.alicdn.com/img/common/zoom_out.cur), auto; }
    .tm-m-photo-viewer { position: relative; margin: 10px 0; width: 0; height: 0; border: 1px solid #ccc; background: #fff; padding: 2px; overflow: hidden; display: none; transition: all 0.2s ease-in; }
    .tm-m-photo-viewer-navleft, .tm-m-photo-viewer-navright { top: 0; bottom: 0; position: absolute; width: 30%; background: url(http://assets.alicdn.com/s.gif); /*解决IE 下背景透明的空白元素无法触发 click 和 hover 事件*/ }
    .tm-m-photo-viewer-navleft { left: 0; }
    .tm-m-photo-viewer-navright { right: 0; }
    .tm-m-photo-viewer-navleft i, .tm-m-photo-viewer-navright i { top: 50%; margin-top:-24px; position: absolute; width: 48px; height: 48px; display: none; }
    .tm-m-photo-viewer-navleft i { left: 0; background-image: url(../img/arrow-l.png); }
    .tm-m-photo-viewer-navright i { right: 0; background-image: url(../img/arrow-r.png); }

# <table>   <tbody>    <tr>     <td align="left"><font>*js </font></td>    </tr>   </tbody>  </table> #

# <table>   <tbody>    <tr>     <td align="left"><font>*效果图 </font></td>    </tr>   </tbody>  </table> #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dobTE4MzIyMzk0NzI0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dobTE4MzIyMzk0NzI0_size_16_color_FFFFFF_t_70]: /images/20220321/f8d883dd08de42078c63529f913a413c.png