메뉴 건너뛰기

2016.12.22 11:26

흐르는 배너 만들기2

조회 수 4182 추천 수 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
번호 제목 날짜 조회 수
» 흐르는 배너 만들기2 2016.12.22 4182
51 bxslider 멈춤현상 2016.12.22 4962
50 jquery 플러그인 링크 모음 2016.12.22 4101
49 html 테이블 고정 (table fixed) 2016.11.17 3950
48 이미지 클릭 손 (cursor:pointer) 2016.11.17 4071
47 jQuery Selector (셀렉터) 2016.11.17 3808
46 날짜 검색 범위 정하기 (jquery) file 2016.11.17 3795
45 jQuery 날짜 비교 (날짜비교) 2016.11.17 5191
44 jQuery 카테고리 선택에 따른 하위 카테고리 변경 (selecbox) file 2016.11.17 3883
43 jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅 2016.11.17 5305
42 jquery 뒤로가기 2016.11.17 3695
41 jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name 2016.11.17 4375
40 jQuery, JavaScript 새로고침(reload) 2016.11.17 3868
39 jquery enter key event submit (jquery 엔터키 이벤트) 2016.11.17 3817
38 Table을 DIV로 표현하기 (예제) file 2016.11.17 4044
37 Html 색상표 모음, 색상코드표 (RGB), 이미지X, 복사 가능 file 2016.11.17 3955
36 jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제 2016.11.17 4223
35 jquery 라디오버튼 선택 확인, 체크박스 선택 확인, 셀렉트박스 선택 확인 2016.11.17 4175
34 jquery 디데이 계산 (D-day,Dday) file 2016.11.17 4657
33 zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기) 2016.10.06 4393
Board Pagination Prev 1 2 3 4 Next
/ 4

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved