owlcar 用法心得 自定义导航

<div class="kpwh_tabowl">
                            <ul class="ul tabbox">
                                <li>乔迁</li>
                                <li>结婚</li>
                                <li>生日</li>
                                <li>祝寿</li>
                                <li>事业伙伴</li>
                                <li>事业有成</li>
                            </ul>
                            <div class="owlbox">
                                <ul class="ul owlimgbox">
                                    <li><img src="images/banner_index.png" alt=""></li>
                                    <li><img src="images/kpwh_img1.jpg" alt=""></li>
                                    <li><img src="images/kpwh_img1.jpg" alt=""></li>
                                    <li><img src="images/kpwh_img1.jpg" alt=""></li>
                                    <li><img src="images/kpwh_img1.jpg" alt=""></li>
                                    <li><img src="images/banner_shmx.png" alt=""></li>
                                </ul>
                                <span class="btn prev"></span>
                                <span class="btn next"></span>
                            </div>
                        </div>
                        <script type="text/javascript">
                            var owlli_num=$('.tabbox li').length-1; 
                            var li_now=0;
                            var owlimgbox=$('.kpwh_tabowl .owlimgbox').owlCarousel({
                                  'items':1,
                                  'pagination':false,
                                  'autoPlay':false,
                                  'addClassActive':true,
                                  'itemsMobile':[479,1],
                                  'itemsTablet':[768,1],
                                  'afterMove':moveand
                             }); 
                             function moveand(){
                                 // console.log(1);
                                 var actvie=$('.owlimgbox .active').index();
                                 $('.tabbox li').removeClass('on').eq(actvie).addClass('on');
                                 
                             }
                             $('.kpwh_tabowl .prev').click(function(event) {
                                 owlimgbox.trigger('owl.prev');
                                 if(li_now>=1){
                                     li_now-=1;
                                 }else{
                                     li_now=owlli_num;
                                 }
                                 $('.tabbox li').removeClass('on').eq(li_now).addClass('on');
                            });
                             $('.kpwh_tabowl .next').click(function(event) {
                                 owlimgbox.trigger('owl.next');
                                 if(li_now<=owlli_num-1){
                                     li_now+=1;
                                 }else{
                                     li_now=0;
                                 }
                                 $('.tabbox li').removeClass('on').eq(li_now).addClass('on');
                            });
                            $('.kpwh_tabowl .tabbox li').first().addClass('on');
                            $('.kpwh_tabowl .tabbox li').on('click',function(){
                                var i=$(this).index();
                                $(this).siblings().removeClass('on').end().addClass('on');
                                owlimgbox.trigger('owl.goTo',i);
                            })
                        </script>