분류없음

jQuery - 이미지 슬라이드 소스

사전 준비사항 

 - 이미지 images1~5.png 파일 5개 버튼 좌우 이미지2개 필수

 - 그리고 src 경로는 본인 프로젝트 경로와 다를 수있습니다.


HTML - 소스

<!DOCTYPE HTML>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link href="../css/imgslide.css" rel="stylesheet" type="text/css" media="all"/>

<link href="../css/common.css" rel="stylesheet" type="text/css" media="all"/>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<script type="text/javascript" src="../js/controller.js"></script>

<script>

</script>

</head>

<body>

<div class="wrap"> <!-- 전체 wrap 감싸안으며 -->

 <div class="slide">

  <button type="button" class="prev">

   <img src="../images/left.png" />

  </button>

  <ul>

   <li><img src="../images/image1.png" alt="" /></li>

   <li><img src="../images/image2.png" alt="" /></li>

   <li><img src="../images/image3.png" alt="" /></li>

   <li><img src="../images/image4.png" alt="" /></li>

   <li><img src="../images/image5.png" alt="" /></li>

  </ul>

  <button type="button" class="next">

   <img src="../images/right.png" />

  </button>

  </div>

  </div><!-- wrap END -->

</body>

</html>


CSS - 소스


img{

  display: block;

  border: 0;

}


.slide{

  width: 600px;

  height: 300px;

  margin: 0 auto;

  overflow: hidden;

  position: relative;

}


.slide ul{

  width: 3000px;

  list-style: none;

  font-size: 0;

}


.slide ul li{

  display: inline-block;

}


.slide button.prev{

  position: absolute;

  left: 0;

  top: 120px;

}


.slide button.next{

  position: absolute;

  right: 0;

  top: 120px;

}


JS - 소스



(function(){

    var current = 0;

    var max = 0;

    var container;

    var interval;

    var xml;

    var animateTarget = null;

    function init(){

      container = jQuery(".slide ul");

      max = container.children().length;

      //console.log();

      events();

      interval = setInterval(next, 3000);

  }

  // 무한 롤링 셋팅

  function setting(){

    container.css("margin-left","-600px");

    container.prepend(container.children()[max-1]);

  }

  function events(){

    jQuery("button.prev").on("click", prev);

    jQuery("button.next").on("click", next);

    jQuery(window).on("keydown", keydown);

  }

  function prev( e ){

    current--;

    if( current < 0 )  current = max-1;

    animate("prev");    // pram

  }

  function next( e ){

    current++;

    if( current > max-1 ) current = 0;

    animate("next");    // pram

  }

  function animate( $direction ){

    if( animateTarget !=null ){

      TweenMax.killTweensOf( animateTarget );

      animateTarget.css("margin-left","0");

    }

    if( $direction == "next"){

      jQuery(container.children()[1]).css("margin-left","600px");

      container.append( container.children()[0] );

    } else if( $direction == "prev"){

      container.prepend( container.children()[max-1] );

      jQuery(container.children()[0]).css("margin-left","-600px");

    }

    animateTarget = jQuery(container.children()[0]);

    TweenMax.to( animateTarget, 0.8, { marginLeft:0, ease:Expo.easeOut });

    clearInterval(interval);  // 누적된어 있는것을 클리어 함

    interval = setInterval(next, 3000);  // Interval 누적됨

  }

  function keydown( e ){

    //console.log(e); 키보드 이벤트 로그

    if( e.which == 39 /*right*/ ){

        next();

    }else if( e.which == 37 /*left*/ ){

        prev();

    }

  }

  jQuery( document ).ready( init );

})();




소스 출처 : https://www.youtube.com/watch?v=ifchyv2u-VE&list=PLkvX9D0C9X8tPzDuTEVd4O2aJs-nYNLir&index=4


유지남님 감사합니다.

신고

최근 댓글

열심히 공부하도록

최근 트랙백

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

태그

카운터

Today : 0
Yesterday : 6
Total : 2,841