슬라이딩 배너(페이드효과,재생,정지버튼) - Key Visual

key Visual

다음의 소스는 페이드 효과, 재생,정지버튼이 포함된 슬라이딩 배너입니다.

HTML

슬라이딩에 사용되는 마크업입니다.

html

<!--  key visual -->
<div class="visual">
  <h2 class="hidden">메인비주얼</h2>
  <div class="visual-controller">
    <a href="#visual-01">1번보기</a>
    <a href="#visual-01">2번보기</a>
    <a href="#visual-01">3번보기</a>
    <a href="#visual-01">4번보기</a>
    <a href="#visual-01">5번보기</a>
    <button type="button" class="btn-stop">정지</button>
    <button type="button" class="btn-play">재생</button>
  </div>


  <div class="visual-list">
    <ul>
      <li id="visual-01">
        <div class="img"><img src="http://lorempixel.com/400/200/sports/1" alt="" /></div>
        <div class="disc">
          <p class="tit">피카소에서 프란시스 베이컨까지</p>
          <p class="date">2016-03-02</p>
          <a href="#none" class="btn-more">자세히보기</a>
        </div>
      </li>
      <li id="visual-02">
        <div class="img"><img src="http://lorempixel.com/400/200/sports/2" alt="" /></div>
        <div class="disc">
          <p class="tit">피카소에서 프란시스 베이컨까지</p>
          <p class="date">2016-03-02</p>
          <a href="#none" class="btn-more">자세히보기</a>
        </div>
      </li>
      <li id="visual-03">
        <div class="img"><img src="http://lorempixel.com/400/200/sports/3" alt="" /></div>
        <div class="disc">
          <p class="tit">피카소에서 프란시스 베이컨까지</p>
          <p class="date">2016-03-02</p>
          <a href="#none" class="btn-more">자세히보기</a>
        </div>
      </li>
      <li id="visual-04">
        <div class="img"><img src="http://lorempixel.com/400/200/sports/4" alt="" /></div>
        <div class="disc">
          <p class="tit">피카소에서 프란시스 베이컨까지</p>
          <p class="date">2016-03-02</p>
          <a href="#none" class="btn-more">자세히보기</a>
        </div>
      </li>
      <li id="visual-05">
        <div class="img"><img src="http://lorempixel.com/400/200/sports/5" alt="" /></div>
        <div class="disc">
          <p class="tit">피카소에서 프란시스 베이컨까지</p>
          <p class="date">2016-03-02</p>
          <a href="#none" class="btn-more">자세히보기</a>
        </div>
      </li>
    </ul>
  </div>
</div>

<!--  // key visual -->

CSS

해당 CSS는 사용자 정의하셔서 적당하게 사용하시기 바랍니다.

css

*{margin: 0;padding: 0;}
li {list-style: none;}
body {font-size: 12px;margin: 20px 50px;}
.hidden {border:0; clip: rect(0,0,0,0); height: 1px;width: 1px;margin: -1px; overflow: hidden;padding: 0;position: absolute;}
.visual {position: relative;width: 400px;z-index: 0;}
.visual-list {overflow: hidden;padding-bottom: 235px;}
.visual-list ul { width: 100%;position: relative;}
.visual-list ul li { width: 100%;position: absolute;left: 50%;margin-left: -50%; display: block; z-index: 0;}
.visual-list ul li.active {z-index: 1;}
.visual-list .img {text-align: center;height: 200px;overflow: hidden;}
.visual-list .disc {position: absolute;bottom: 50px;min-width: 60px;min-height: 50px; padding: 10px; /* right: 50%;  margin-right: -100px;*/ background: #000;opacity: 0.5;left: 120px;}
.visual-list .disc .tit {color: #cbcbcb; font-size: 14px;letter-spacing: .05em;}
.visual-list .disc .date {color: #a2a2a2; font-size: 12px;letter-spacing: .03em; margin-top: 10px;}
.visual-list .disc p {position: relative;}
.visual-list .disc .btn-more { position: absolute;bottom: 10px;right: 15px;width: 70px;height: 20px;line-height: 18px;color: #fff;font-size: 11px;border: 1px solid #fff;
border-radius:5px; text-decoration: none;text-align: center;
}
.visual .visual-controller {position: absolute;bottom: 0;width: 100%;text-align: center;}
/* .visual .visual-controller + .visual-list {padding-bottom: 240px;} */
.visual .visual-controller a {width: 15px;height: 15px;display: inline-block;text-indent: -999em;vertical-align: middle;border: 1px solid #ccc;border-radius:15px;background-color: #ccc;}
.visual .visual-controller a.active {background-color: red;}
.visual .visual-controller [class*="btn-"] { color: #fff;border: 1px solid #ccc;line-height: 20px;padding: 2px;display: none;}
.visual .visual-controller .btn-play {background-color: #34dfa2;}
.visual .visual-controller .btn-stop {background-color: #fa45ce;}
.visual .visual-controller .btn-play.active,
.visual .visual-controller .btn-stop.active {display: inline-block;}

javaScript

슬라이딩 배너에 사용되는 자바스크립트 소스입니다.

javaScript

var KNBUI = KNBUI || {};

KNBUI.keyVisual = (function($){
  
  // start visual
  function visual() {
    if(!$('.visual').length) {
      return;
    }
    
    var visual = $('.visual'),
        ctrlBtn = $('.visual-controller a'),
        visualList = $('.visual-list li'),
        btnStop = $('.btn-stop'),
        btnPlay = $('.btn-play'),
        max = visualList.size() -1,
        current = 0,
        auto,
        autoPlay = true, // 자동재생
        start = 2, // 시작설정 0부터 시작
        playSpeed = 4000; // 단위 1000/1초
    
    function show(num) {
      ctrlBtn.eq(num).addClass('active');
      visualList.eq(num).fadeIn().addClass('active');
    }
    
    function next() {
      var n = current;
      if(n < max) {
        n++;
      } else {
        n = 0;
      }
      return n;
    }
    
    function clear(num) {
      ctrlBtn.eq(num).removeClass('active');
      visualList.eq(num).fadeOut().removeClass('active');
    }
    
    function play() {
      ctrlBtn.eq(next()).trigger('click');
    }
    
    ctrlBtn.eq(start).addClass('active');
    show(start);
    
    ctrlBtn.each(function(index){
      $(this).data('number', index);
    });
    
    current = start;
    
    if(autoPlay) {
      auto = setInterval(play, playSpeed);
      btnStop.addClass('active');
    }
    
    ctrlBtn.on('click', function(e){
      e.preventDefault();
      var idx = $(this).data('number');
      clear(current);
      show(idx);
      current = idx;
    });
    
    ctrlBtn.hover(
      function() {
        if(autoPlay) {
          clearInterval(auto);
        }
      },
      function() {
        if(autoPlay) {
          auto = setInterval(play, playSpeed);
        }
      }
    );
    
    btnStop.on('click', function(e) {
      e.preventDefault();
      clearInterval(auto);
      
      btnStop.removeClass('active');
      btnPlay.addClass('active');
      autoPlay = false;
      
    });
    
    btnPlay.on('click', function(e){
      e.preventDefault();
      auto = setInterval(play, playSpeed);
      
      btnPlay.removeClass('active');
      btnStop.addClass('active');
      autoPlay = true;
    });
    
  }
  // end visual
  
  return {
    visual : visual,
    // gallery : gallery
  }
  
}(jQuery));

$(document).ready(function(){
  KNBUI.keyVisual.visual();
});

Result View

결과 페이지를 코드뷰에서 확인해 보시기 바랍니다.

필자 슬라이딩 배너 모음 링크

1. 세로형 탭타입 슬라이딩 배너
2. 갤러리 슬라이드 타입
3. 2

Jaehee's WebClub