zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    awk查看本机IP+查看本网段mac
    wget
    kvm安装,使用,优化
    方向
    bindview+dlz(mysql)
    页面侧滑栏效果
    数据库的事务理解
    页面平衡移动进出的效果
    返回键弹出是否退出对话框
    引导页之页面等待3秒跳转
  • 原文地址:https://www.cnblogs.com/ghfjj/p/7726644.html
Copyright © 2011-2022 走看看