2024-10-31 11:01:35
轮播的HTML如下: 注意container CLASS样式必需要写相对定位:position: relative;
<div class="container">
<ul>
<volist name="getBannerImg" id="vo">
<li>
<if condition="CONTROLLER_NAME eq 'Listing'">
<div class="pic"><a href="javascript:;" id="video-btn"><img src="{$vo.titlepic}" width="100%"/></a></div>
<else/>
<div class="pic"><img src="{$vo.titlepic}" width="100%"/></div>
</if>
</li>
</volist>
</ul>
<div class="video" id="videobox">
<!-- <img src="{$culturedata.titlepic}" /> -->
</div>
</div>
JS代码
<!-- 视频播放 -->
<script type="text/javascript">
$(function(){
var vurl = '{$video}',
flag = 0;
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
$('#videobox').append("<div class='close'></div><embed src='' width='785px' height='100%' allowfullscreen='true' wmode='transparent'></embed>")
$('#videobox').find('.close').css('top',-36);
}
else{
$('#videobox').append("<div class='close'></div><video src='' width='auto' height='530' controls='controls' id='myvideo'></video>")
}
$('#videobox').children('video').attr('src',vurl);
$('#videobox').children('embed').attr('src',vurl);
$('#video-btn').click(function(){
$('#videobox').show();
document.getElementById('myvideo').play();
// $('#myvideo').play();
})
$('#videobox').find('.close').click(function(event){
event.stopPropagation();
$('#videobox').hide();
document.getElementById('myvideo').pause();
})
document.getElementById('myvideo').onclick = function(){
if(flag==0){
this.pause();
flag = 1;
}else{
this.play();
flag = 0
}
}
})
</script>
部份 CSS
.slide .container {height: 500px;overflow: hidden;position: relative;}
.container .video {height: 442px;margin-top: 6px;position: fixed;top: 40%;left: 25%;margin-top: -221px;display: none;z-index: 10000;}
.container .video .close {width: 36px;height: 36px;position: absolute;top: 5px;right: 140px;background: url(../img/video-close.png) no-repeat center;z-index: 10001;}