티스토리 메인페이지 내 헤드라인형 포스트의 인터벌타임 조절하기

티스토리 메인페이지는 블로그를 마치 홈페이지처럼 사용자 마음대로(≠나는 아직) 다양하게 꾸밀 수 있도록 변형이 가능하다. 

그 중 헤드라인형 포스트의 포스트 개수나 인터벌 타임(포스트 하나가 보여지는 시간)을 조절하고 싶을 때는 다음의 소스를 수정한다.

<h2 class="tt-item-title"><span class="tt-item-title-bg"><span class="tt-item-title-inner"></span></span></h2>
<ul class="tt-wrap-item">
    <s_tabloid>
        <li class="tt-item-point-0 tt-span-12 tt-last tt-clear">
            <div class="tt-wrap-post tt-span-12 tt-last">
                <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a>
                <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
                    <div class="tt-post-thumb-link">
                        <a class="tt-post-link-over" href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a>
                        <a href="#1" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a>
                        <a href="#2" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a>
                        <a href="#3" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a>
                        <a href="#4" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a>
                    </div>
                </div>
            </div>
        </li>
        <li class="tt-item-point-1 tt-span-12 tt-last tt-clear" style="display: none;">
            <div class="tt-wrap-post tt-span-12 tt-last">
                <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a>
                <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
                    <div class="tt-post-thumb-link">
                        <a href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a>
                        <a href="#1" class="tt-post-link-over" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a>
                        <a href="#2" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a>
                        <a href="#3" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a>
                        <a href="#4" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a>
                    </div>
                </div>
            </div>
        </li>
        <li class="tt-item-point-2 tt-span-12 tt-last tt-clear" style="display: none;">
            <div class="tt-wrap-post tt-span-12 tt-last">
                <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a>
                <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
                    <div class="tt-post-thumb-link">
                        <a href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a>
                        <a href="#1" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a>
                        <a href="#2" class="tt-post-link-over" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a>
                        <a href="#3" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a>
                        <a href="#4" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a>
                    </div>
                </div>
            </div>
        </li>
        <li class="tt-item-point-3 tt-span-12 tt-last tt-clear" style="display: none;">
            <div class="tt-wrap-post tt-span-12 tt-last">
                  <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a>
                <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
                    <div class="tt-post-thumb-link">
                        <a href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a>
                        <a href="#1" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a>
                        <a href="#2" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a>
                        <a href="#3" class="tt-post-link-over" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a>
                        <a href="#4" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a>
                    </div>
                </div>
            </div>
        </li>
        <li class="tt-item-point-4 tt-span-12 tt-last tt-clear" style="display: none;">
            <div class="tt-wrap-post tt-span-12 tt-last">
                <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a>
                <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear">
                    <div class="tt-post-thumb-link">
                        <a href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a>
                        <a href="#1" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a>
                        <a href="#2" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a>
                        <a href="#3" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a>
                        <a href="#4" class="tt-post-link-over" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a>
                    </div>
                </div>
            </div>
        </li>
   
</ul>
<script type="text/javascript">
    var roller = ttRepeatItemByInterval('ttItem', 5, 2);
</script>
 </s_tabloid>Colored by Color Scripter

line 77의 굵게 표시한 ttRepeatItemByInterval('ttItem', 5, 2); 에서

중간 숫자 5는 번갈아 보여지는 포스트의 수를, 마지막 숫자 2는 인터벌타임을 뜻한다.

1) 포스트 수를 조절하고 싶으면 포스트의 수를 뜻하는 중간 숫자를 바꾸면 된다.

대신 위의  <li class="tt-item-point-4 tt-span-12 tt-last tt-clear" style="display: none;"> 부터 </li> 까지 하나의 블럭으로 보고

블럭의 갯수와 li class="tt-item-point-다음에 나오는 숫자(0~4)도 맞춰줘야 한다.

2) 인터벌타임. 즉, 포스트 하나당 노출 시간을 조절하고 싶으면 마지막 숫자를 바꿔준다.

예를들어, 2를 5로 바꾸면 포스트가 천천히 전환되는것을 확인할 수도 있고, 응용하면 이미지 전환을 없앨 수도 있다.