jQuery产品切换tab选项卡

查看演示立即下载

插件描述：特别好用的tab选项卡，可以轮播多张图片,无多余代码注释全

$(function() {
    var width = 1101; //跟外面盒子的宽度一样，或者写成 var width = $(".content").width();
    var ulNum = $(".content ul").length; //获取ul的个数
    var contentWidth = width * ulNum; //获取整个box应该的长度，刚开始box设置成了1100，但是应该把所有的ul防到一行里面去，这样box向左移动的时候才是无缝滚动
    $(".box").width(contentWidth); //给box设置宽度  .width() 是获取宽度  .width(value)是设置宽度
    $(".nav span").click(function() {
        //$(this)表示点击的这个元素 ，.addClass()表示添加的样式名称，.siblings()表示这个元素的所有兄弟级元素，此处表示span，
        // .removeClass()表示删除的样式名称
        $(this).addClass('active').siblings().removeClass('active');
        var clickNum = $(this).index(); //判断点击的是第几个span .index()方法返回第几个，从0开始算起
        //alert(clickNum);
        var moveLeft = clickNum * width * -1; //应该向左移动的距离
        $(".box").animate({
            'left': moveLeft
        }, 600); //通过操作box的left来使box向左移动， .animate 是动画函数
        //第一个参数用{}包含起来，里面的内容形式为 {'left':100,'top':100}，多个用逗号隔开，
        // 表示从当前位置移动到left为100px、top为100px的位置（即left:100px;top:100px处），
        //第二个参数为时间，表示从当前位置移动到第一个参数用时，单位为ms，1000ms=1秒
        //点击的时候一定要点开审查元素，查看box元素的行内样式
    })
})

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery仿微信自定义菜单
下一个特效： jQuery图片切换插件jPicture