室內設計1:廣告輪播

範例結果

二、slider加入

範例結果:

S1:slider畫面準備

  <!-- id="slider" 開始 -->

  <div id="slider">
    <div class="sliderTab">
      <a class="on" href="javascript:;">Interior Design01</a>
      <a href="javascript:;">Interior Design02</a>
      <a href="javascript:;">Interior Design03</a>
      <a href="javascript:;">Interior Design04</a>
      <a href="javascript:;">Interior Design05</a>
    </div>
    <img class="on" src="images/slider01.jpg" alt="slider01"/>
    <img src="images/slider02.jpg" alt="slider02"/>
    <img src="images/slider03.jpg" alt="slider03"/>
    <img src="images/slider04.jpg" alt="slider04"/>
    <img src="images/slider05.jpg" alt="slider05"/>
  </div>

  <!-- id="slider" 結束 -->

S2:CSS加入後發現【#slider】區因為照片position定位重疊,而父區域找不到高度

/* #slider =========================================== */
#slider{
  /* display: none; */
  position: relative;
  /* height: 347px;  暫訂 */
}
#slider>img{
  /* display: block; */
  width: 100%; height: auto;
  position: absolute; top: 0; left: 0;
  opacity: 0;
}
#slider>img:nth-of-type(1){
  opacity: 1;
}

.sliderTab{
  position: absolute; bottom: 0; left: 0; z-index: 1;
  background: rgba(0, 0, 0, 0.377);
  height: 50px; width: 100%;
}
.sliderTab a{
  display: inline-block; width: 20%;
  border-right: 1px solid #f57c00; box-sizing: border-box;
  color: #EFAF00; text-align: center; line-height: 50px;

  position: relative;
  filter: drop-shadow(0 -1px 1px #000);
}
.sliderTab:last-child{
  border-right: none;
}
.sliderTab .on{
  background:#EFAF00; color:#fff; text-shadow: 1px 1px #000;
}
.sliderTab .on:before{
  content: "";
  border-bottom: 10px solid #EFAF00;
  border-left:10px solid transparent; border-right:10px solid transparent;
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
}

S3:利用JQ【自動】取得#slider高度(發生狀況連結

  //S2:取得#slider 高度
//    var $sliderH = $('#slider>img').outerHeight();
      var $sliderH = $('#slider>img').outerWidth()/(1920/600);
    $('#slider').css('height',$sliderH);

參考連結:jQuery outerHeight() 方法