0

左上隅から CSS リボンがぶら下がっている Web サイトを設計しています。リボンの下に画像を配置すると、リボンが画像に重なります。これが目的の外観です。

リボンが重なっている

ただし、J-Query スライド ショー手法を実装すると、次のことが起こります。

移行の途中

リボンは半分にカット

私の質問は、スライド ショーを使用しながら、どうすれば希望するオーバーラップの外観を得ることができるかということです。以下に、次のコードを投稿しました。

スライドショー用の HTML と JavaSCRIPT

    <center>

<div id="slideshow">
    <div>
      <img class="slide_img" src="images/limo_banner.png">
    </div>
    <div>
      <img class="slide_img" src="images/24_banner.png">
    </div>
    <div>
     <img class="slide_img" src="images/limo_banner.png">
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>

$(document).ready(function(){

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

});

</script>

</center>

スライドショーのCSS

#slideshow {  
    position: relative;
}

#slideshow > div { 
    position: absolute; 
}

.slide_img  {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    -webkit-box-shadow: 0px 0px 25px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 25px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 25px rgba(50, 50, 50, 1);
}

リボンのCSS

.ribbon {
    background: #A83736;
    border-left: 1px dashed #aaa;
    border-right: 1px dashed #aaa;
    border-radius: 5px 5px 0 0;
    box-shadow: 5px 0 0 #A83736, -5px 0 0 #A83736;
    height: 120px;
    margin: 0 5px;
    position: relative;
    width: 90px;
    -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
    margin-left: 50px;
}
.ribbon:after, .ribbon:before {
    border-top: 15px solid #A83736;
    content: '';
    height: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
.ribbon:after {
    border-left: 50px solid transparent;
    right: -6px;
}
.ribbon:before {
    border-right: 50px solid transparent;
    left: -6px;
}
4

2 に答える 2

3

div を含むスライドショーよりも高い z-index を持つようにリボンを設定すると、表示されます。

.ribbon { z-index 10; }

.containing-div-for-slideshow { z-index: 0; }
于 2013-08-09T18:34:55.310 に答える
2

リボンの z-index を高く設定してみてください: 9999。私が使用した多くのカルーセルとスライドショーは、要素に z-index を設定しました。

于 2013-08-09T18:35:11.940 に答える