apps/com.actionsoft.apps.coe.pal.publisher/template/page/publish.client.xpages.banner.html
chunyangli0323@163.com be4a711ac6 轮播图刷新更新
2023-07-07 12:54:19 +08:00

79 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>流程发布门户-轮播图</title>
<script type="text/javascript" src="../commons/js/jquery/scripts/jquery.js"></script>
<!-- 轮播图 -->
<script type="text/javascript" src="../apps/com.actionsoft.apps.coe.pal.publisher/lib/flexslider/js/jquery.flexslider.js"></script>
<link rel="stylesheet" type="text/css" href="../apps/com.actionsoft.apps.coe.pal.publisher/lib/flexslider/css/flexslider.css"/>
<link rel="stylesheet" type="text/css" href="../commons/css/awsui.css"/>
<script type="text/javascript" src="../commons/js/awsui.js"></script>
<style type="text/css">
.flex-control-nav {
width: 100%;
position: absolute;
top: -20px;
text-align: center;
z-index: 999;
}
</style>
<script type="text/javascript">
var sid = "<#sid>";
var uid = "<#uid>";
var data = <#bannerImgs>;
$(function() {
var content = '<div class="flexslider">';
content += '<ul class="slides">';
for(var i = 0; i < data.length; i++) {
var dataUrl = data[i].src + "?v=" + new Date().getTime();
content += '<li><img src="' + dataUrl + '"></li>';
}
content += '</ul>';
content += '</div>';
$('#content').html(content);
var setting = {
animation: "slide",
slideDirection: "horizontal",
slideshow: true,
slideshowSpeed: 5000,
prevText: "",
nextText: ""
}
$(".flexslider").flexslider(setting);
})
window.onload=function(){
$(window).resize();
}
var resizeWaiter = false;
$(window).resize(function() {
if(!resizeWaiter){
resizeWaiter = true;
setTimeout(function(){
var parentHeight = $('iframe', parent.document).height();// xpages高度
var contentHeight = $('#content').height();// 实际高度
// 图片控制工具
var top = (parentHeight >= contentHeight ? contentHeight : parentHeight) - 20;
var direction = (parentHeight >= contentHeight ? contentHeight : parentHeight)*0.6;
$("ol.flex-control-nav").css('top', top + 'px');
$(".flex-direction-nav a").css('top', direction + 'px');
// 图片显示区域控制
$('.flexslider .slides img').each(function() {
var imgHeight = $(this).height();
if (imgHeight > parentHeight) {
$(this).css('position', 'relative');
$(this).css('top', -(imgHeight - parentHeight)/2);
}
})
resizeWaiter = false;
}, 500);
}
});
</script>
</head>
<body style="background-color: #FFF;color:rgb(96,96,96);">
<div id="content"></div>
</body>
</html>