jQuery 임시 사이트 작성의 base ②(자신용)

마지막으로 계속: 슬라이드쇼에 대해서만

  <div class="slick">
    <div class="single">
      <div><img src="image/802.jpg" alt=""></div>
      <div><img src="image/IMG_3943.jpg" alt=""></div>
      <div><img src="image/IMG_4259.jpg" alt=""></div>
      <div><img src="image/IMG_4926.jpg" alt=""></div>

    </div>
  </div>

var page=0;
var lastPage =parseInt($(".single img").length-1);

  $(".single img").css("display","none");
  $(".single img").eq(page).css("display","block");  //pageを取得

function changePage(){
  $(".single img").fadeOut(1000);
  $(".single img").eq(page).fadeIn(1000);          //一旦1秒で画像間の接続時間
};

var Timer;
function startTimer(){
Timer =setInterval(function(){
  if(page === lastPage){
     page = 0;
     changePage();
  }else{
     page ++;
     changePage();
  };},4000);                        //一旦４秒で次画像へ
};
}

startTimer();

//cssは仮

.slick {
  width: 100%;
  height: 400px;
  position: relative;
  /* left: 0; */
  top: 260px;

}
.single {
  position: relative;
}
.single img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
}