Question

关于jQuery轮播焦点图的代码，这个是别人发的，新手有些看不明白，问题在补充里面，帮忙了大家

这个就是完成的代码 ，HTML代码就不贴了，也比较简单。
因为是新手，大家别见笑。
首先，这个jquery代码是怎么启动的，这个是问题1，也没有常见的ready或click之类的。
<script>
function Scroll(obj,speed,interval){ //父级容器，轮播速度，切换间隔
$("."+obj).each(function(){ //问题2：这个获取到的对象是什么？
var $box = $(this),
$imgUl = $box.children(".imgList"),
$imgLi = $imgUl.children("li"),
$btnUl = $box.children(".btnList"),
$btnLi = $btnUl.children("li"),
$btnPreNex = $box.children(".pre-nex"),
$btnPre = $box.children(".prev"),
$btnNex = $box.children(".next"),
n = $imgLi.length,
width = $imgLi.width(),
left = parseFloat($imgUl.css("left")),
k = 0,
Player;
$imgUl.css("width",n*width);
function scroll(){ //轮播事件 //这个与问题1相同，怎么启动的？
$imgUl.stop().animate({left:-width},speed,function(){ //这个是问题3，看不懂stop()怎么写在这个位置，后面跟一个动画，这个轮播不是li在的位置每次移动一个宽度吗，这里怎么是UL应用animate方法呢？
k += 1;
$imgUl.css("left",0);//问题4 ，这个是要干什么？？
$imgUl.children("li:first").appendTo($(this)); //问题5，这个this是什么，要加到第一个li元素中？？
$btnLi.removeClass('cur'); //这个应该是下面的小圆点按钮 移除选中状态的CSS
if(k >= n){
k = 0;
}
$btnUl.children("li").eq(k).addClass('cur'); //这个应该是获取到当前的li，添加选中的CSS
});
}

//之后的就看不懂了，因为前面问题太多，麻烦先帮忙解释上面这一段。
$btnLi.click(function(){ //小圆点点击事件
.....

</script>

Answer 1

• 问题1：function Scroll(obj,speed,interval){....},这是个函数，在页面必然会有类似 Scroll(样式名称，速度，间隔) 这样的调用。

• 问题2：$("."+obj).each(function(){ ... }); 这段代码分开分析就会比较易懂，$("."+obj)这个表示的是获取页面中class含有obj的对象，返回的是jQuery对象数组；each()就是遍历这个数组。

• function scroll(){ ... } 这同样是个函数，调用一定是在function Scroll(obj,speed,interval){....} 内部，代码没贴全，你自己找一下。

• 问题3：stop（）就是先停下来，为下一个动画做准备。这段代码不是移动li，就是移动UL，然后每次移动一个li的宽度。

• 问题4：这是在UL的动画的回调函数中的代码，意思是动画结束后，设置最左边的距离为0，就是紧贴最左边显示。

• 问题5：这里的$(this)，要看具体的上下文环境，因为是在$imgUl.stop().animate({left:-width},speed,function(){ .... }); 整个里面写的，所以$(this)指向的就是$imgUI。

  $imgUl.children("li:first").appendTo($(this));
  这句的意思就是，找到UL下面的第一个li把它放到UL中li最后的位置。

希望对你有帮助!