zoukankan      html  css  js  c++  java
  • 带自动的选项卡

    html部分

    <div class="navWrap">
    <div class="nav clearfix">
    <a class="active" href="javascript:;">赚钱</a>
    <a href="javascript:;">经典</a>
    <a href="javascript:;">省时</a>
    <a class="navA4" href="javascript:;">耐玩</a>
    </div>
    <div class="contWrap">
    <div class="cont block">
    <img src="images/navCont1.jpg" alt="">
    </div>
    <div class="cont">
    <img src="images/navCont2.jpg" alt="">
    </div>
    <div class="cont">
    <img src="images/navCont3.jpg" alt="">
    </div>
    <div class="cont">
    <img src="images/navCont4.jpg" alt="">
    </div>
    </div>
    </div>

    js部分

    /*nav选项卡切换带自动*/
    var timer=null;
    var index=1;
    $(".nav a").each(function(i){
    $(this).mouseover(function(){
    $(this).addClass('active').siblings().removeClass('active');
    $(".contWrap .cont").eq(i).show().siblings(".contWrap .cont").hide();
    index=i+1;
    });
    })
    $(".navWrap").mouseover(function(){
    window.clearInterval(timer);
    });
    $(".navWrap").mouseleave(function(){
    auto();
    });
    function auto(){
    window.clearInterval(timer);
    timer=setInterval(function(){
    index++;
    if(index>4){
    index=1;
    }
    $(".nav a").eq(index-1).addClass('active').siblings().removeClass('active');
    $(".contWrap .cont").eq(index-1).show().siblings(".contWrap .cont").hide();
    },3000);
    }
    auto();

     注:定时器一定要记得清空

    日常所遇,随手而记。
  • 相关阅读:
    基本数据结构:链表(list)
    字符串函数
    TCHAR
    开源库链接
    视频 链接
    tabbar
    加密
    安全类链接,https
    资本
    审核 -链接 - 发布证书
  • 原文地址:https://www.cnblogs.com/zhihou/p/6537558.html
Copyright © 2011-2022 走看看