그누보드 QA - 제이쿼리 자동 롤링 탭메뉴 관련 질문좀..

제이쿼리 자동 롤링 탭메뉴 관련 질문좀..

광깔 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.08.17 18:06:36 조회 4084 (211.♡.♡.112)

본문


<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <title>snippet</title>
    <style type="text/css">
    /* reset */
    * {margin:0;padding:0}
    fieldset,img {border:0 none}
    dl,ul,ol,menu,li {list-style:none}
    blockquote, q {quotes:none}
    blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
    input,select,textarea,button {vertical-align:middle}
    button {border:0 none;background-color:transparent;cursor:pointer}
    body {/*background:#333;*/}
    body,th,td,input,select,textarea,button {font-size:12px;line-height:1.5;font-family:'Malgun Gothic','맑은 고딕',sans-serif;color:#000}
    a {color:#000;text-decoration:none}
    address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
    table {border-collapse:collapse;border-spacing:0}
    img {vertical-align:top}
    .piece {
        /*min-width:300px;max-width:600px;padding:10px;margin:10px;background:#fff;*/
        width: 1020px; margin: 50px auto;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
    $(document).ready (function () {
        $('.jq_onoff .jq_hide').css('display', 'none');
        $('.jq_autoonoff .jq_hide').css('display', 'none');
        //탭(ul) onoff(auto)
        $('.jq_tabonoff_auto .jq_cont').children().css('display', 'none');
        $('.jq_tabonoff_auto .jq_cont div:first-child').css('display', 'block');
        $('.jq_tabonoff_auto .jq_tab li:first-child').addClass('on');
        function tabonoff(o) {
            var index = $('.jq_tabonoff_auto .jq_tab li').index(o);
            $(o).siblings().removeClass();
            $(o).addClass('on');
            $(o).parent().next('.jq_cont').children().slideUp('fast').eq(index).slideDown('fast');
        }
        (function(a){
            a.fn.tabonoff_auto=function(p){
                var s_t_i=p&&p.scroller_time_interval?p.scroller_time_interval:"10000"; //롤링타임 수정가능
                var dom=a(this); 
                var s_length=dom.length; 
                var timer; 
                var current = 0; begin(); play();
                function begin(){
                    dom.click(function(){current = dom.index($(this)); play(); stop()});
                    dom.parent().parent().hover(function(){stop();},function(){timer = setTimeout(play,s_t_i);});
                }
                function stop(){clearTimeout(timer);}
                function play(){
                    clearTimeout(timer); tabonoff(dom[current]);
                    if(current >= s_length-1){current = 0;} else{current ++;}
                    timer = setTimeout(play,s_t_i);
                }
            }
        })(jQuery);
        $(".jq_tabonoff_auto li").tabonoff_auto();
    });
    </script>
</head>
<body>
<div class="piece">
<!--    <h2>리스트(ul) tabonoff(auto)</h2>-->
    <!-- //탭(ul) tabonoff(auto) -->
    <style type="text/css">
        .tab_menu {/*width:100%;display:table; border:1px solid #ccc;*/ width: 800px; float: right; text-align: right}
        .tab_menu li {/*display:table-cell;border-left:1px solid #ccc;text-align:center*/ float: right; padding: 10px 20px;}
        .tab_menu li:first-child {/*border-left:0 none*/}
        .tab_menu .tit {display:block;/*padding:5px;*/color:#404040;/*background-color:#ededed;*/cursor:pointer}
        .tab_menu .on .tit {/*color:#fff; background-color:#27b600*/ color: #d91b1b}
        .tab_cont {/*padding:5px;margin-top:5px;border:1px solid #d5d5d5;border-radius:5px*/ margin: 20px 0 0}
        .h1_css {width: 200px; display: inline}
    </style>
    <div class="jq_tabonoff_auto">
        <h1 class="h1_css">트렌드</h1>
        <ul class="jq_tab tab_menu">
            <li><strong class="tit">menu4</strong></li>
            <li><strong class="tit">menu3</strong></li>
            <li><strong class="tit">menu2</strong></li>
            <li><strong class="tit">menu1</strong></li>
        </ul>
        <div class="jq_cont tab_cont">
            <div class="cont"><img src="images/m_trand4.jpg"></div>
            <div class="cont"><img src="images/m_trand3.jpg"></div>
            <div class="cont"><img src="images/m_trand2.jpg"></div>
            <div class="cont"><img src="images/m_trand1.jpg"></div>
        </div>
    </div>
    <!-- 탭(ul) tabonoff(auto)// -->
</div>

</body>
</html>

https://jsfiddle.net/eond/fn3kqur2/1/

위 url에 적힌 사이트에서 틀만 살짝 바꿔 사용할려고 하는데..

menu1,menu2,menu3,menu4 부분을 li = float:right 로 설정을 하니

menu4번 부터 실행이 됩니다 ㅠㅠㅠ

위 코드에서 menu1번부터 실행될 수 있게 하려면

어떻게 수정을 해야 할까요?? 전문가 분들 부탁드립니다