室內設計1:廣告輪播

範例結果

五、#slider區下方按鈕,大圖替換顯示,並滑鼠靠上去時,產生小圖

範例結果

S1:利用JQ,當按下【.sliderTab a】下方按鈕時,照片替換

  //S3:【.slider a】事件
    $('.sliderTab a').click(function(){
        $(this).addClass('on').siblings().removeClass('on');
        $('#slider>img').eq($(this).index()).stop(true,true).animate({opacity:1},1000)
                        .siblings('img').stop(true,true).animate({opacity:0},500);
      });

 

 

S2:利用JQ,由大圖抓取檔案路徑,置於下方【.sliderTab】後面

  //S3:【.slider a】事件
    $('.sliderTab a')
      .click(function(){
        $(this).addClass('on').siblings().removeClass('on');
        $('#slider>img').eq($(this).index()).stop(true,true).animate({opacity:1},1000)
                        .siblings('img').stop(true,true).animate({opacity:0},500);
      })
      .hover(
      function(){  // 滑入
        $(this).addClass('hover');
        var $hIndex = $(this).index();
        var $hImgSrc = $('#slider>img').eq($hIndex).attr('src');
        // console.log($hIndex,$hImgSrc);
        $(this).prepend('<img src="'+ $hImgSrc +'" class="hoverimg" />');
      }
      ,function(){ // 滑出
        $(this).removeClass('hover');
        $(this).children().remove('img');
      }
    )
    ;

參考連結(本網)

S2:加入後進行CSS美化

/* #slider =========================================== */

.sliderTab a.hover{
  position: relative;
}

/* .hovering 前面一定要加 #slider 讓優先權提高 */
#slider .hoverimg{
  width:200px; height: 60px; border-radius: 10px;
  box-shadow: 1px 1px 3px #000; border: 1px solid #fff;
  position: absolute; top: -75px; left: 50%; transform: translateX(-50%);
}