자동 시간 지연 CSS 배너

Question

이미지가 4 개 있으며 각 이미지는 연속적으로 시간 지연을 사용하여 경계 효과 (css)를 가져야합니다. 예를 들어

O O O O

5초 후

O O O O 5초 후

O O O O

,

아무도 그것을 만드는 방법을 알고 있습니까?

Answer 1

는 아래의 HTML 제공이 가능하다 (하지만 어설픈 조금) :

<div id="timer"> 
    <div class="interval"></div> 
    <div class="interval"></div> 
    <div class="interval"></div> 
    <div class="interval"></div> 
</div>​ 

그리고 CSS :

@-moz-keyframes loading { 
    0%, 24% { 
     border-color: #f00; 
    } 
    25%, 100% { 
     border-color: #000; 
    } 
} 

@-ms-keyframes loading { 
    0%, 24% { 
     border-color: #f00; 
    } 
    25%, 100% { 
     border-color: #000; 
    } 
} 

@-o-keyframes loading { 
    0%, 24% { 
     border-color: #f00; 
    } 
    25%, 100% { 
     border-color: #000; 
    } 
} 

@-webkit-keyframes loading { 
    0%, 24% { 
     border-color: #f00; 
    } 
    25%, 100% { 
     border-color: #000; 
    } 
} 

@keyframes loading { 
    0%, 24% { /* stops the gradual fading-out */ 
     border-color: #f00; 
    } 
    25%, 100% { 
     border-color: #000; 
    } 
} 

#timer .interval { 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    border: 1px solid #000; 
    border-radius: 50%; 
    -moz-animation: loading 20s linear infinite; 
    -ms-animation: loading 20s linear infinite; 
    -o-animation: loading 20s linear infinite; 
    -webkit-animation: loading 20s linear infinite; 
    animation: loading 20s linear infinite; 
} 

#timer .interval:nth-child(1) { 
    -moz-animation-delay: 0; 
    -ms-animation-delay: 0; 
    -o-animation-delay: 0; 
    -webkit-animation-delay: 0; 
    animation-delay: 0; 
} 

#timer .interval:nth-child(2) { 
    -moz-animation-delay: 5s; 
    -ms-animation-delay: 5s; 
    -o-animation-delay: 5s; 
    -webkit-animation-delay: 5s; 
    animation-delay: 5s; 
} 

#timer .interval:nth-child(3) { 
    -moz-animation-delay: 10s; 
    -ms-animation-delay: 10s; 
    -o-animation-delay: 10s; 
    -webkit-animation-delay: 10s; 
    animation-delay: 10s; 
} 

#timer .interval:nth-child(4) { 
    -moz-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    -o-animation-delay: 15s; 
    -webkit-animation-delay: 15s; 
    animation-delay: 15s; 
} 
​ 

JS Fiddle demo.

또는 다음 단계보다는 수동으로 사용하고 설정, CSS와 animation-delay 트리거 jQuery를 (단순 용), CSS 전환을 사용하지만,이 경우, 자바 스크립트를 사용하여 :

function transNext(currentEl, transitionClass) { 
    if (!currentEl) { 
     return false; 
    } 
    else { 
     transitionClass = transitionClass || 'interval'; 
     var cur = $(currentEl), 
      nxt = cur.next().length ? cur.next() : cur.prevAll(':last'); 
     cur.removeClass(transitionClass); 
     nxt.addClass(transitionClass); 

    } 
} 

$('#timer').on('mozAnimationEnd msAnimationEnd oAnimationEnd webkitAnimationEnd animationEnd', function(e) { 
    transNext(e.target, 'interval'); 
});​ 

을 그리고 수정 된 CSS :

@-moz-keyframes loading { 
    0%, 99% { 
     border-color: #f00; 
    } 
    100% { 
     border-color: #000; 
    } 
} 

@-ms-keyframes loading { 
    0%, 99% { 
     border-color: #f00; 
    } 
    100% { 
     border-color: #000; 
    } 
} 

@-o-keyframes loading { 
    0%, 99% { 
     border-color: #f00; 
    } 
    100% { 
     border-color: #000; 
    } 
} 

@-webkit-keyframes loading { 
    0%, 99% { 
     border-color: #f00; 
    } 
    100% { 
     border-color: #000; 
    } 
} 

@keyframes loading { 
    0%, 99% { /* stops the gradual fading-out */ 
     border-color: #f00; 
    } 
    100% { 
     border-color: #000; 
    } 
} 

#timer div { 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    border: 1px solid #000; 
    border-radius: 50%; 
} 

#timer .interval { 
    -moz-animation: loading 5s linear 1; 
    -ms-animation: loading 5s linear 1; 
    -o-animation: loading 5s linear 1; 
    -webkit-animation: loading 5s linear 1; 
    animation: loading 5s linear 1; 
} 
​ ​ 

JS Fiddle demo.

Answer 2

''setInterval'' JavaScript 기능을 사용하여 가능합니다. 어떻게 작동하는지 예를 들어 this JSFiddle here을보십시오.

HTML :

<div class="container"> 
    <div class="marker"></div> 
    <div class="marker"></div> 
    <div class="marker"></div> 
    <div class="marker"></div> 
</div> 

CSS :

.marker { 
    background: #999; 
    float: left; 
    width: 20px; 
    height: 20px; 
    margin: 0 5px 0 0; 
} 

.marked { 
    border: 2px solid red; 
} 

자바 스크립트 :

jQuery(function() { 
    // Set border around first element 
    jQuery('.container .marker:first').addClass('marked'); 

    // Start interval with 5 second steps 
    var iv = setInterval(function() { 
     // Executes every 5 seconds 

     // Is there a next element? 
     if (jQuery('.marker.marked').next('.marker').length == 1) { 
      jQuery('.marker.marked') // actual marked element 
       .removeClass('marked') // remove border 
       .next('.marker')  // go to next element 
       .addClass('marked'); // add border 
     } else { 
      // No next element? Start again with first element 
      jQuery('.marker.marked').removeClass('marked'); 
      jQuery('.container .marker:first').addClass('marked'); 
     } 
    }, 5000); 
});​ 

왼쪽에서 오른쪽으로 한 번 실행하거나 시퀀스의 마지막 이미지 다음에 왼쪽에서 다시 시작해야하는지 여부는 질문에 분명하지 않습니다. 내 예제는 마지막 div 이후에 멈 춥니 다. DIV 요소를 이미지 요소로 대체해야합니다. 클래스 ''마커 ''속성 만 있으면됩니다.

EDIT : 위의 업데이트 된 바이올린/코드는 요소를 순환하고 첫 번째 요소로 다시 반복됩니다. 그런 다음 CSS를 사용해야하는 경우