首页 > 其他 > 详细

实现table切换

时间:2016-03-05 11:33:38      阅读:284      评论:0      收藏:0      [点我收藏+]

 

http://down.admin5.com/info/2015/1211/130283.html

引入jquery

<script type="text/javascript">
$(function(){
$(‘.tabPanel ul li‘).hover(function(){
$(this).addClass(‘hit‘).siblings().removeClass(‘hit‘);//将同辈元素移除hit class属性
$(‘.panes>div:eq(‘+$(this).index()+‘)‘).show().siblings().hide(); //经过的显示 不经过的隐藏
})
})

实现自动table切换+定时器:

<script type="text/javascript">
        $(document).ready(function(){
            var slideShow=$(".slideShow"), //获取最外层框架的名称
            ul=slideShow.find("ul"),
            showNumber=slideShow.find(".showNav span"),//获取按钮
            oneWidth=slideShow.find("ul li").eq(0).width();
            var time=null;//定时器返回值,主要用于关闭定时器
            var iNow=0;//iNow是正在展示图片的检索值
            $(‘.showNav span‘).click(function(){ //为每个按钮绑定一个点击事件
            $(this).addClass("active").siblings().removeClass("active"); //按钮被点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
            var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值        
            iNow=index;
            ul.animate({
            "left":-oneWidth*index, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值index确定
            })
            })
            timer=setInterval(function(){
                iNow++;
                if(iNow>showNumber.length-1){
                    iNow=0;
                }
                showNumber.eq(iNow).trigger("click");//模拟触发数字按钮的click
            },20000)//轮播时间
        })
    </script>

 

实现table切换

原文:http://www.cnblogs.com/yanran/p/5243740.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!