메뉴 건너뛰기

2016.12.22 11:26

흐르는 배너 만들기2

조회 수 4850 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<style type="text/css">
*{margin:0;padding:0;}
ul, li{list-style:none;}
#recomPro{margin-bottom:40px;}
#recomPro > div.inner{width:1400px;margin:0 auto;}
#recomPro .slideWrap{position:relative;overflow:hidden;height:337px;margin-bottom:28px;}
#recomPro .slideWrap p.bg{position:absolute;top:33px;width:179px;height:324px;background:url("./images/bg_tic_01.png") no-repeat 0 0;}
#recomPro .slideWrap p.bg.side01{left:0px;}
#recomPro .slideWrap p.bg.side02{right:-3px;background:url("./images/bg_tic_02.png") no-repeat 0 0;}
#recomPro .slideWrap a.bxBtn{position:absolute;z-index:10;top:117px;margin:0;width:21px;height:39px;background:url("./images/btn_prev_01.png") no-repeat 0 0;text-indent:-9999px;}
#recomPro .slideWrap a.bxBtn.bx-prev{left:179px;}
#recomPro .slideWrap a.bxBtn.bx-next{left:auto;right:179px;background:url("./images/btn_next_01.png") no-repeat 0 0;}
#recomPro .tickerSlide{position:absolute;top:0px;left:0px;overflow:hidden;-webkit-transition-timing-function: linear; /* Safari and Chrome */transition-timing-function: linear;}
#recomPro .tickerSlide li{float:left;width:200px;padding:33px 0 0 0;}
#recomPro .tickerSlide li > a{display:block;}
#recomPro .tickerSlide li > a p.thum{text-align:center;margin:29px 0 15px 0;}
#recomPro .tickerSlide li > a p.thum img{width:140px;margin:0 auto;}
#recomPro .tickerSlide li > a p.txt{height:59px;padding:0 20px;font-size:13px;margin-bottom:12px;text-align:center;color:#424242;line-height:18px;overflow:hidden;}
#recomPro .tickerSlide li > a p.txt em{display:block;margin-bottom:5px;text-align:center;font-weight:bold;}
#recomPro .tickerSlide li > a p.price{font-family:Roboto;font-size:16px;color:#e5151a;font-weight:bold;text-align:center;}
#recomPro .tickerSlide li > a p.price del{display:block;color:#999;font-weight:normal;}
#recomPro .tickerSlide li > a p.price del span{font-size:18px;}
#recomPro .tickerSlide li > a p.price span.wp{color:#e5151a;font-size:22px;}
#recomPro .tickerSlide li > a p.price span.wp span.pr{font-size:22px;color:#e5151a;}
< /style>


< div class="recomPro" id="recomPro">
<div class="inner">
  <h3 class="titMain">Recommended PRODUCT</h3>
  <div class="slideWrap">
   <a href="#none" class="bxBtn bx-prev">이전</a>
   <ul class="tickerSlide" id="tickerSlide">
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>1[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>2[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>3[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>4[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>5[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>6[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>7[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>8[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
   </ul>
   <a href="#none" class="bxBtn bx-next">다음</a>
   <p class="bg side01">&nbsp;</p>
   <p class="bg side02">&nbsp;</p>
  </div>
</div>
< /div>
< !-- //recomPro e -->

< script type="text/javascript">
$(document).ready(function(){
var moveType = 0;
var moveSpeed = 2500;
//var moveWork = false;
var movePause = false;

function tkSlide(){ 
  var $tkSlide = $('#tickerSlide'),
   $tkSlidePos = $('#tickerSlide').css('left').replace(/[^-\d\.]/g, ''),
   $tkWidth = $('#tickerSlide').width(),
   $tklength = $('#tickerSlide li').length,
   $tkSlideW = $tkWidth + 400,
   $tkitemW = $('#tickerSlide li').width(),
   $tkitemFirst = $('#tickerSlide li:first-child');

  $tkSlide.css({
   'left' : $tkSlidePos,
   'width' : $tkWidth + $tkitemW
  });
  if(moveType==0){
   $tkSlide.css('left' ,$tkSlidePos);
   $tkSlide.animate({left : -$tkitemW},{duration:moveSpeed, easing:"linear", step:function(){
    if(movePause==true){
     $tkSlide.stop();
    }
   }, complete:function(){
    $tkSlide.append("<li>" + $('#tickerSlide li:first-child').html() + "</li>");
    $('#tickerSlide li:first-child').remove();
    $tkSlide.css('left' ,'0');
    tkSlide();
   }});
  }
}
$('#tickerSlide').parent().on("mouseenter", function(){
  movePause=true;
});
$('#tickerSlide').parent().on("mouseleave", function(){
  movePause=false;
  console.log('mouseleave');
  tkSlide();
});

$('.slideWrap >a.bxBtn').on('click', function(){
  var banMove = 5,
   $thisClass = $(this).hasClass("bx-prev");

  if($thisClass){
   var $tkSlide = $('#tickerSlide');
   for(var i=0;i<banMove;i++){   
    var $tkSlide = $('#tickerSlide'),   
     $tkitem = $('#tickerSlide li:last-child()').html();
    $('#tickerSlide li:first-child()').before("<li>" + $tkitem + "</li>");
    $('#tickerSlide li:last-child()').remove();
   }
   $tkSlide.css('left' ,'-200px');
   $tkSlide.animate({left : 0}, 500);
  } else {
   var $tkSlide = $('#tickerSlide');
   for(var i=0;i<banMove;i++){   
    var $tkSlide = $('#tickerSlide'),   
     $tkitem = $('#tickerSlide li:nth-child(1)').html();
    $tkSlide.append("<li>" + $tkitem + "</li>");
    $('#tickerSlide li:nth-child(1)').remove();
   }
   $tkSlide.css('left' ,0);
   $tkSlide.animate({left : -200}, 500);
  }
});
tkSlide();
< /script>

List of Articles
번호 제목 날짜 조회 수
54 시간 카운트 2016.12.22 4430
53 디자인 셀렉트 박스 & CSS 2016.12.22 4336
» 흐르는 배너 만들기2 2016.12.22 4850
51 bxslider 멈춤현상 2016.12.22 5835
50 jquery 플러그인 링크 모음 2016.12.22 4737
49 html 테이블 고정 (table fixed) 2016.11.17 4526
48 이미지 클릭 손 (cursor:pointer) 2016.11.17 4619
47 jQuery Selector (셀렉터) 2016.11.17 4306
46 날짜 검색 범위 정하기 (jquery) file 2016.11.17 4317
45 jQuery 날짜 비교 (날짜비교) 2016.11.17 5859
44 jQuery 카테고리 선택에 따른 하위 카테고리 변경 (selecbox) file 2016.11.17 4405
43 jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅 2016.11.17 6010
42 jquery 뒤로가기 2016.11.17 4160
41 jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name 2016.11.17 5009
40 jQuery, JavaScript 새로고침(reload) 2016.11.17 4344
39 jquery enter key event submit (jquery 엔터키 이벤트) 2016.11.17 4333
38 Table을 DIV로 표현하기 (예제) file 2016.11.17 4594
37 Html 색상표 모음, 색상코드표 (RGB), 이미지X, 복사 가능 file 2016.11.17 4683
36 jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제 2016.11.17 4812
35 jquery 라디오버튼 선택 확인, 체크박스 선택 확인, 셀렉트박스 선택 확인 2016.11.17 4648
Board Pagination Prev 1 2 3 4 5 Next
/ 5

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved