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

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

2018.08.17 18:06:36 조회 4191 (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번부터 실행될 수 있게 하려면

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