zoukankan      html  css  js  c++  java
  • jQuery的TAB切换+定时器

    对于焦点轮播图,首选的都是用JS去写,很多原因都说是因为定时器啊,获取遍历啊各种原因

    以下我写的焦点轮播图,用的JQ的tabe切换加了一个定时器~

    JQ代码如何:

    var banner_box=$(".banner_box li"),//获取图片的li
    buttons=$(".img_tit li"),//获取按钮的li
    iNow=0, //遍历初始值为0
    timer=null;//定时器
    butsl=buttons.length; //按钮的个数

    buttons.mouseover(function(){
    clearInterval(timer);//鼠标移入按钮取消定时器
    iNow =$(this).index();
    $(this).addClass("active").siblings().removeClass("active");//鼠标滑动按钮添加active
    banner_box.eq(iNow).show().siblings().hide();//点击按钮遍历对应的图片显示
    });

    //鼠标移出按钮,执行定时器
    buttons.mouseout(function(){
    show();
    });

    //定时器放到一个函数里
    function show(){
    timer= setInterval(function(){
    iNow++;

    if(iNow>butsl){
    iNow=0;
    }
    banner_box.eq(iNow).show().siblings().hide();
    buttons.eq(iNow).addClass("active").siblings().removeClass("active");
    },1000);
    };

    show();

    });

    CSS代码:

    <div class="conwind">
    <div class="banner_box">
    <ul>
    <li style="display:block;"><a href="#"><img src="image/pic.jpg" alt="banner"></a></li>
    <li><a href="#">11111111111111</a></li>
    <li><a href="#">2222222222222222</a></li>
    <li><a href="#">3333333333333333</a></li>
    <li><a href="#">4444444444444</li>
    </ul>
    </div>
    <div class="img_tit conwind" id="buttons">
    <ul>
    <li class="active" index="1">双立人平底锅4件套</li>
    <li index="2">双立人平底锅4件套</li>
    <li index="3">双立人平底锅4件套</li>
    <li index="4">双立人平底锅4件套</li>
    <li index="5">双立人平底锅4件套</li>
    </ul>
    </div>
    </div>

  • 相关阅读:
    JavaScript 操作CSS
    源码搭建LAMP服务器
    Modified 2 color sort
    python的网络库
    找出有序整数数组中下标与值相同的所有元素
    sql 查看Oralce 数据库连接状态
    oracle 快闪 sql
    Sql server dblink
    昆山桶装水/免费送货上门/
    C# Tostring() 格式大全 [转]
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4480602.html
Copyright © 2011-2022 走看看