테스트 사이트 - 개발 중인 베타 버전입니다

롤링되는 거 찾았습니다.^^;; 채택완료

닐리리맘보 3년 전 조회 1,918

latest 최신글에 있더라구요.;;;

그래서 롤링되는 속도는 조절했습니다.

 

여기서 총9개의 이미지가 들어가 있는데요.

1~9번까지 한번만 롤링되게 할 수 있을까요?

 

현재는 1~9번 이미지까지 무한루프로 롤링되고 있어요

 

아래는 최신글 css입니다.

 

</strong></p>

<p> </p>

<p><strong>@charset "utf-8";

.lt_bn {position:relative;overflow:hidden}

.lt_bn .bx-wrapper{height:650px}

.lt_bn li{background-position:center center;background-size:cover;background-repeat:no-repeat;height:650px;text-align:center;color:#fff}

.lt_bn .bg{;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);content:'';z-index:1;overflow:hidden}</strong></p>

<p><strong>.lt_bn .bn_txt{display:table;height:100%;width:100%;position:relative;z-index:2;}</strong></p>

<p><strong>.lt_bn .txt_wr{display:table-cell;vertical-align:middle;padding:0 20%}</strong></p>

<p><strong>.lt_bn li .bn_tit{font-size:3.8em;font-weight:bold; line-height:1.53em;

-webkit-text-shadow:2px 2px 5px rgba(55,55,55,0.4);

-moz-text-shadow:2px 2px 5px rgba(55,55,55,0.4);

text-shadow: 2px 2px 5px rgba(55,55,55,0.4);}

.lt_bn li .bn_detail{font-size:1.231em;margin:20px 0 20px; line-height:1.7em;

-webkit-text-shadow:2px 2px 5px rgba(55,55,55,0.4);

-moz-text-shadow:2px 2px 5px rgba(55,55,55,0.4);

text-shadow: 2px 2px 5px rgba(55,55,55,0.4);}

.lt_bn li .bn_view {display:inline-block;background:#fff;color:#333;padding:0 35px;line-height:45px;margin-top:20px}</strong></p>

<p><strong>.lt_bn .bn_link{display:none;position:absolute;bottom:10px;right:10px;z-index:99;background:#ff0000;color:#fff;width:40px;line-height:40px;border-radius:30px;text-align:center;font-size:16px}

.lt_bn:hover .bn_link{display:block}

.lt_bn .bn_link:hover {transform: rotate( -45deg );color:#fff;}</strong></p>

<p><strong>.lt_bn .bx-pager{position:absolute;bottom:0;right:0}</strong></p>

<p>

<strong>.lt_bn li .bn_tit{opacity:0; transform:translateY(30px);

-webkit-transition: all 0.3s ease-in .3s;

-moz-transition:  all 0.3s ease-in .3s;

-ms-transition: all 0.3s ease-in .3s;

-o-transition: all 0.3s ease-in .3s;

transition: all 0.3s ease-in .3s}

.lt_bn li .active-slide .bn_tit{opacity:1;

transform:translateY(0)}</strong></p>

<p><strong>.lt_bn li .bn_detail{opacity:0;

-webkit-transition: all 1s ease-in .5s;

-moz-transition:  all 1s ease-in .5s ;

-ms-transition:  all 1s ease-in .5s;

-o-transition: all 1s ease-in .5s;

transition: all 1s ease-in .5s}

.lt_bn li .active-slide .bn_detail{opacity:1}</strong></p>

<p><strong>.lt_bn li .bn_view{opacity:0;

-webkit-transition: all 1.3s ease-in 1s;

-moz-transition: all 1.3s ease-in 1s;

-ms-transition: all 1.3s ease-in 1s;

-o-transition: all 1.3s ease-in 1s;

transition: all 1.3s ease-in 1s}

.lt_bn li .active-slide .bn_view{opacity:1}</strong></p>

<p><strong>.lt_bn #bx_pager{position:absolute;bottom:20px;right:20px;z-index:99}

.lt_bn #bx_pager a{color:#fff;display:inline-block;padding:5px;line-height:20px;opacity:0.5}

.lt_bn #bx_pager span{display:inline-block;width:0;height:1px;background:#fff;vertical-align:top;margin-top:10px;margin-left:8px;

-webkit-transition: all 0.3s ease-in;

-moz-transition:  all 0.3s ease-in ;

-ms-transition: all 0.3s ease-in ;

-o-transition: all 0.3s ease-in ;

transition: all 0.3s ease-in }

.lt_bn #bx_pager .active{opacity:1}

.lt_bn #bx_pager .active span{width:20px}      

.lt_bn .btn_bottom{position:absolute;bottom:0;left:50%;width:81px;height:37px;background:url('./btn_bottom.png');border:0;margin-left:-40px;text-indent:-999px;overflow:hidden}</strong></p>

<p><strong> @media (max-width: 969px){

    .lt_bn .bx-wrapper ,.lt_bn li{height:500px}

    .lt_bn .bx-controls-direction a{width:30px;height:30px }

    .lt_bn .txt_wr{padding:0 40px}

    .lt_bn li .bn_tit{font-size:2em;}

    .lt_bn .btn_bottom{display:none}

    .lt_bn #bx_pager{width:100%;text-align:center;right:0}

 }</strong>

 </p>

<p><strong>

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

키운터변수를 하나 만들고

변수의 초기값을 0으로 주고 이미자가 들어올 때마다 변수를 하나씩 증가시키다가 변수가 9가 되면 정지시키는 방법이 제일 좋을 것 같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

닐리리맘보
3년 전
그럼 비타주리 님.
마지막 9번째 이미지 시간을 따로 늘려버릴 수 있는 방법이 있을까요?
비타주리
3년 전
물론 가능하죠.
셋인터벌등을 써서 시간통제를 하면 됩니다만
단시간에 코드를 구성하기가 쉽지 않아서 디테일한 부분은 본인이 더 정보를 알아내시거나 하셔야 합니다.

댓글을 작성하려면 로그인이 필요합니다.

스크립트로 transitionend 이벤트 감지해서 처리해야할것 같은데요.

저도  transition 을 잘 못써서 죄송하네요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인