zoukankan      html  css  js  c++  java
  • H50073:div 循环添加点击事件,swiper循环添加点击事件

    1,div 循环添加点击事件

        <div class="video home_video">
            <div class="videolist" vpath="4.mp4" ipath="4.mp4"><img src="../common/images/theme/default/video_icon.png"></div>
        </div>
        <div class="videos">&nbsp;</div>
        <script type="text/javascript">
            $('.videolist').each(function() { //遍历视频列表
                $(this).click(function() { //这个视频被点击后执行
                    var vcr = $(this).attr('ipath');
                        var vidwid = document.body.offsetWidth * 0.8 + "px";
                        var vidhig = document.body.offsetWidth * 0.8 / 1.777 + "px";
                        layer.open({
                            type: 1,
                            zIndex:19891014,
                            title: false,
                            closeBtn: 0, //显示关闭按钮
                            shade: 0.7,
                            shadeClose: true,
                            border: 0,
                            // skin: 'shadows',
                            skin: 'myLayskin',
                            area: [vidwid, vidhig], //会出现滚动条
                            anim: 0,
                            scrollbar: false, //防止父页面自动跳到页面顶端
                            content: '<div style="line-height:0; overflow: hidden;"><video id="vid" width="100%" height="100%" controlsList="nodownload  nofullscreen noremoteplayback" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop" src="' + vcr + '" style="100%;height:100%;"></video></div>'
                        });
                        $('#vid')[0]['disablePictureInPicture'] = true; //disablePictureInPicture的属性改为true 
                });
            });
        </script>

    2,swiper循环添加点击事件

            <div class="left left212">
                <div class="biaoyu">茅台王子酒·厚德品质·尊天下</div>
                <div class="swiper-container">
                    <div class="video swiper-wrapper" style="">
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233509Ep.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233513NS.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233517lH.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233520q1.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233531rZ.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/2335340Z.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233537kG.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/233541U7.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/25/2335444z.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/26/13602AL.png"></div>
                        <div class="swiper-slide" onclick="swpClick('A')"><img src="common/upload/26/136076V.png"></div>
    
                    </div>
                    <!-- Add Arrows -->
                    <div style="right:50px" class="swiper-button-next"></div>
                    <div style="left:50px" class="swiper-button-prev"></div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination" style="bottom:0"></div>
                </div>
                <script>
                    var swiper = new Swiper('.swiper-container', {
                        slidesPerView: 1,
                        spaceBetween: 30,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        centeredSlides: true,
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                    });
    
    
    
                    $('.swiper-slide').each(function() { //遍历视频列表
    
                        $(this).click(function() { //这个视频被点击后执行
                            console.log("wwiper");
    
                            // var vcr = $(this).attr('ipath');
                            //     var vidwid = document.body.offsetWidth * 0.8 + "px";
                            //     var vidhig = document.body.offsetWidth * 0.8 / 1.777 + "px";
                            //     layer.open({
                            //         type: 1,
                            //         zIndex:19891014,
                            //         title: false,
                            //         closeBtn: 0, //显示关闭按钮
                            //         shade: 0.7,
                            //         shadeClose: true,
                            //         border: 0,
                            //         // skin: 'shadows',
                            //         skin: 'myLayskin',
                            //         area: [vidwid, vidhig], //会出现滚动条
                            //         anim: 0,
                            //         scrollbar: false, //防止父页面自动跳到页面顶端
                            //         content: '<div style="line-height:0; overflow: hidden;"><video id="vid" width="100%" height="100%" controlsList="nodownload  nofullscreen noremoteplayback" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop" src="' + vcr + '" style="100%;height:100%;"></video></div>'
                            //     });
                            //     $('#vid')[0]['disablePictureInPicture'] = true; //disablePictureInPicture的属性改为true 
                        });
                    });
    
    
    
    
    
                </script>
                <style>
    
                    .swiper-container {
                        width: 100%;
                        height: 70%;
                    }
    
                    .swiper-slide img {
                        max-height: 100%
                    }
    
                    .swiper-slide {
                        text-align: center;
                        font-size: 18px;
                        height: 100%;
                        /* Center slide text vertically */
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                    }
    
                    .swiper-slide-active,.swiper-slide-duplicate-active {}
                </style>
    
            </div>
    琥珀君的博客
  • 相关阅读:
    ZOJ Bookcase
    C*++ Calculations
    STL <cctype>
    线段树单点更新+区间更新
    ZOJ Supermarket
    STL <cassert>
    算法导论<二>
    MV Maker [DP]
    LIS 最长有序子序列(递增/递减/非递增/非递减)
    LIS
  • 原文地址:https://www.cnblogs.com/eliteboy/p/14485282.html
Copyright © 2011-2022 走看看