?????????????????????????????????<#listvideoListasvideo>???????????????????????...">

成人国产一区二区三区|亚洲观看视频一级精品|亚洲综合人成网免费视频|99亚洲精品高清一二区|无码AV中文一区二区三区|精品色欧美色国产一区国产|国产午夜精品理论片在线观看|日本精品一区二区三区不卡观看

技術(shù)文章
swiper 視頻無限自動輪播 無縫輪播的實現(xiàn)
發(fā)布日期：2019-06-29 閱讀次數(shù)：3092 字體大小：大中小

本案例用的swiper-4.2.2.min.js 和 swiper-4.2.2.min.css

 

html代碼：       

             

                    

                        <#list videoList as video>
                            

                            
                            

                        
 
                    

                    
                    
 

             
 

 

javascript代碼：
 
     var mySwiper2 = new Swiper('#swiper2', {
                loop : true,
                speed : 2000,
                autoplay : {
                    delay : 5000,
                    stopOnLastSlide : false,
                    disableOnInteraction : true,
                },
                pagination : '.swiper-pagination'
            })
     
            mySwiper2.el.onmouseover = function() { //鼠標(biāo)進(jìn)入
                mySwiper2.autoplay.stop();  //輪播停止
            }
            mySwiper2.el.onmouseout = function() { //鼠標(biāo)離開
                var v_len = $("#swiper2 .swiper-slide").find("video").length
                    for(var i = 0;i                       $("#swiper2 .swiper-slide").find("video").get(i).pause(); //把所有停止
                    }
                mySwiper2.autoplay.start(); //輪播開始
            }
     
            $("#swiper2 .swiper-slide video").on("click", function() {
                var isPaused = $(this).get(0).paused  //視頻是否在播放
                if(isPaused){ // 我點擊的這個是暫停的
                    $(this).get(0).play(); //播放
                }else{
                    $(this).get(0).pause(); //停止
                }
            });