我必须在图像上箭头以导航到上一个或下一个图像。箭头的 div 没有背景颜色。当我单击该框时,会显示一个警报。这在整个 div 上都是可能的。当图像显示在带有箭头的 div 下时,单击在 Internet Explorer 中不起作用,但在 Firefox 和 Chrome 中起作用。用户无法导航到下一个或上一个图像。当您为带有箭头的框提供背景颜色时,它确实有效,但您将无法看到图像。
有人能帮帮我吗?下面是一个可以立即运行的示例项目。
谢谢!
<div id="photoViewer">
<div id="photoViewerDialog" class="photoViewerWindow">
<div id="photoViewerImageCon">
<img src="../../Content/ShowImage.jpg" class="image" alt="photo" />
<div id="navigationBar">
<div id="navigationLeft"><span><</span></div>
<div id="navigationRight"><span>></span></div>
</div>
</div>
</div>
<div id="photoViewerMask"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//transition effect
$('#photoViewerMask').fadeIn();
$('#photoViewerMask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
var borderSpace = 200;
var minimumSize = 520;
//Set width and height of photoviewer
if (winW > minimumSize) {
if ((winW - borderSpace) > minimumSize) {
$('#photoViewer .photoViewerWindow').css('width', winW - borderSpace);
}
else {
$('#photoViewer .photoViewerWindow').css('width', minimumSize);
}
}
if (winH > minimumSize) {
if ((winH - borderSpace) > minimumSize) {
$('#photoViewer .photoViewerWindow').css('height', winH - borderSpace);
}
else {
$('#photoViewer .photoViewerWindow').css('height', minimumSize);
}
}
var photoViewerWindow = $('#photoViewer .photoViewerWindow');
var imageCon = $('#photoViewer .photoViewerWindow #photoViewerImageCon');
var infoCon = $('#photoViewer .photoViewerWindow #photoViewerInfoCon');
var infoHeader = $('#photoViewer .photoViewerWindow #photoViewerInfoCon #photoViewerInfoHeader');
var InfoThumbs = $('#photoViewer .photoViewerWindow #photoViewerInfoCon #photoViewerInfoThumbs');
//Set width and line-height of photo to show
$(imageCon).width($(photoViewerWindow).width() - $(infoCon).width());
$(imageCon).css('line-height', $(photoViewerWindow).height() + 'px');
//Set the popup window to center
$('#photoViewerDialog').css('top', winH / 2 - $('#photoViewerDialog').height() / 2);
$('#photoViewerDialog').css('left', winW / 2 - $('#photoViewerDialog').width() / 2);
//transition effect
$('#photoViewerDialog').fadeIn();
});
$('#navigationLeft').click(function () {
alert('left');
});
$('#navigationRight').click(function () {
alert('right');
});
</script>
CSS
#photoViewerMask {
position:absolute;
z-index:9000;
background-color:#000000;
top: 0;
width: 100%;
height: 100%;
}
#photoViewer .photoViewerWindow {
position:fixed;
min-width:520px;
min-height:520px;
max-height: 2048px;
z-index:9001;
}
#photoViewer .photoViewerWindow #photoViewerImageCon {
display: block;
float: left;
height: 100%;
max-height: 2048px;
position: relative;
z-index: 9003;
text-align: center;
background-color: Black;
}
#photoViewer .photoViewerWindow #photoViewerImageCon .image {
vertical-align: middle;
z-index: 9003;
}
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationBar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft,
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight {
color: rgb(255, 255, 255);
color: rgba(255, 255, 255, 0.5);
font-weight: bold;
font-size: 4em;
position: absolute;
z-index: 9910;
top: 0;
height: 100%;
cursor: pointer;
}
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft:hover,
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight:hover {
color: rgb(255, 255, 255);
}
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft
{
/*background-color:Aqua;*/
width: 20%;
left: 0px;
}
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft span
{
position: absolute;
left: 20px;
}
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight
{
/*background-color:Fuchsia;*/
width: 80%;
right: 0px;
}
#photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight span
{
position: absolute;
right: 20px;
}