0

これを使用して、スライダーの上に画像を配置しようとしています:

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,
 });
 });
 });

これはうまくいきます。最後に別の面としてすべての上に必要な画像をレンダリングすることを除いて、問題はありませんでした。私はこれについて間違った方法で進んでいますか？この画像をスキップしたり、別のスライドのように見えないように書き直したりするにはどうすればよいですか?

4

2 に答える 2

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,
 });
 });
 });

于 2012-04-19T06:26:09.980 に答える
0

あなたが何を意味するのかわかりませんが、位置を追加できると思います：画像（ロゴなど）に固定し、上、下、右、左に配置します。

于 2012-04-18T17:31:43.470 に答える