我正尝试使用以下方法将图像放在滑块上:
CSS:
#orbitDemo { background: url(../../images/orbit/spinner.gif) no-repeat center center
#3c3c3c; height: 300px; }
#orbitDemo.orbit { height: auto; }
#orbitDemo img, #orbitDemo div { display: none; }
#orbitDemo.orbit img, #orbitDemo.orbit div { display: block;}
@media handheld, only screen and (max-width: 767px) {
dl.nice.tabs.mobile { margin-bottom: 0px; }
.nice.tabs.mobile dd a { padding: 12px 20px; }
div.foundation-header h1 { font-size: 32px; font-size: 3.2rem; }
}
#container
{
margin-left: auto;
margin-right: auto;
width: 950px;
padding: 5px 15px 20px 15px;
border: 1px solid;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #BBB;
border-bottom: 1px solid #BBB;
border-radius: 4px;
-moz-border-radius: 4px;
box-shadow:inset 0 0 2px #ccc;
background: #fff;
margin-bottom: 15px;
}
#image
{
position: absolute;
display: none;
z-index: 2000; // might need to be changed if you cant see it
}
HTML:
<div id="sliderbg">
<div class="container">
<div class="row">
<div id="orbitDemo">
<div>
<a href="<?php echo $link1; ?>" >
<img src="<?php echo $slide1 ;?>" alt="Slider" />
</a>
</div>
<div>
<a href="<?php echo $link2; ?>">
<img src="<?php echo $slide2 ;?>" alt="Slider" />
</a>
</div>
<div>
<a href="<?php echo $link3; ?>">
<img src="<?php echo $slide3 ;?>" alt="Slider" />
</a>
</div>
<div id="image">
<img src="<?php echo $slide0 ;?>" (This is the image over the slider.)
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(window).load(function() {
$('#orbitDemo').orbit({
animation: 'horizontal-push',
bullets: false,
});
});
});
这很有效。我没有遇到任何问题,除了它将我想要的图像作为最后的另一面渲染。我是以错误的方式来做这件事的吗?如何让它跳过这个图像或重写它以使它看起来不像另一张幻灯片?
答案 0 :(得分:1)
我想出了答案。
我应该做的是结束滑块div图层并使用滑块之外的滑块定义新图像,然后告诉它根据滑块自行偏移:
<div id="sliderbg">
<div class="container">
<div class="row">
<div id="orbitDemo">
<a href="<?php echo $link1; ?>" >
<img src="<?php echo $slide1 ;?>" alt="Slider" />
</a>
<a href="<?php echo $link2; ?>">
<img src="<?php echo $slide2 ;?>" alt="Slider" />
</a>
<a href="<?php echo $link3; ?>">
<img src="<?php echo $slide3 ;?>" alt="Slider" />
</a>
</div>
<div id="image">
<img src="<?php echo $slide0 ;?>"
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var ob = $('#orbitDemo').offset();
$('#image').css({ 'top': ob.top+56, 'left': ob.left+0 }).show();
$(window).load(function() {
$('#orbitDemo').orbit({
animation: 'horizontal-push',
bullets: true,
});
});
});
答案 1 :(得分:0)
我不确定我是否知道你的意思,但我认为你可以添加位置:固定到你的图像(用于考试标识),并将其定位为顶部,底部,右侧和左侧。