[jQuery] 흐르는 배너 만들기2

<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>

댓글

댓글 쓰기

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

.scrollOff{position:fixed;overflow:hidden;height:100%;} // body 스크롤 막음 function scrollOff(){    $('body').addClass('scrollOff').on('scroll touchmove mousewheel', function(e){       e.preventDefault();    }); } // body 스크롤 풀기 function scrollOn(){    $('body').removeClass('scrollOff').off('scroll touchmove mousewheel'); } 지인에게 받은 팁...iOS때문에 여러사람들 고생하네...
자세한 내용 보기

[html] 모바일웹 작업 팁 정리중...

1. 가로/세로 전환시 폰트 고정 -webkit-text-size-adjust:none; viewport에서 maximum-scale가 있어야 하고 값이 1.0일때만 반응. 2. viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> 3. 상단 url바 숨기기 <script type="text/javascript"> window.addEventListener("load",function(){  setTimeout(scrollTo,0,0,1);  },false); </script> 4. 전화번호 기능 <a href="tel:000-0000-0000">전화걸기</a> <a href="sms:000-0000-0000">문자보내기</a> <a href="sms:">문자보내기 실행</a> 5. 키보드 호출 <input type="text" /> <input type="search" /> <input type="tel" /> <input type="url" /> <input type="email" /> <input type="time" /> <input type="number" /> <input type="datetime"
자세한 내용 보기

Swiper lazyLoading

최신 버전 Swiper lazy Loading는 지금 사이트에서 보면 된다. https://idangero.us/swiper/api/ 하지만 구버전 일단 지금 사이트에서 사용하고 있는 버전이 3.4.0버전인데 옵션들이 좀 많이 달라서 검색에 애를 먹고 있다. 결과적으로 찾고 찾아서  lazyLoading: true, lazyLoadingInPrevNext: true, watchSlidesProgress: true, watchSlidesVisibility: true 이렇게 사용하면 됨. 구 버전 API만 모아놓은데 어디 없으려나... 더 찾아 볼걸 여기에 있구나 https://github.com/nolimits4web/Swiper/blob/Swiper3/API.md
자세한 내용 보기