插件描述：特别好用的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元素的行内样式
})
})
PREVIOUS:
NEXT:
相关插件-Tabs
讨论这个项目（6）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
Xtreme-Protector° 0
2017/7/10 17:29:11
-
鼠标快速来回点击有bug
ye654321
2017/11/18 14:42:30
这里加一个.stop()
$(".box").stop().animate({'left':moveLeft}, 600);
秦时明月? 0
2017/7/10 9:08:18
虽然没什么技术含量 不过楼主这注释真心不错 手动赞
黄河爱浪0
2018/3/4 22:37:04
-
呵呵，我觉得还是你的评论更有意思，你这孩子 ，说什么大实话！
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
