今天的主要工作是实现图片的轮播

今天的主要工作是实现图片的轮播

主要的功能是

简单的原理是将最后一张图片拼接到第一张图片进行显示，完成轮播

//单位荣誉轮播效果
function autoRollLeft(){
    //大于四条 开始轮播
    if(dwryCount > 4){
        
        $("#dwryBox").animate({marginLeft:"-328.4px"},3000,"linear",function(){
        $('#dwryBox').css({marginLeft:"0px"});
            $('#dwryBox').children("div").first().remove().clone(true)
                              .appendTo('#dwryBox');
        });
    }
}

这里主要用到的函数是animate函数

他具体可以这样理解 $(‘选择器’).animate( 终点JSON，动画时间，回调函数)；

{marginLeft:"-328.4px"}：代表向左移动-328.4px，

3000：表示这个动作{marginLeft:"-328.4px"}花费了三秒钟

linear：这个代表动画过渡的效果

function：代表结束以后会自动调用的函数

$('#dwryBox').css({marginLeft:"0px"});：如果设置为0代表衔接的时候不需要时间

这里需要注意如何让这个animate停下来

function stopRoll() {    
    $("#dwryBox").stop(true, false);   
    clearInterval(rollInterval);
}

首先介绍一下stop的两个函数

这个代表$('#id').stop(stopAll,goToEnd)

对于两个参数的理解

stopAll 为false时，不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时，停止所有加入队列的动画（如goToend为true，直接跳到当前动画的最终效果）。

goToend为false时，不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧)，goToend为true时，允许直接跳到完成当前动画的最终末尾效果

这两个函数可以解决当鼠标移入的时候动画停止的效果 setInterval() clearInterval()

rollIntervalPeople = setInterval("autoRollLeftPeople();",3000);

使用计时器每隔三秒执行一次autoRollLeftPeople()函数

清楚计时器clearInterval(rollInterval);

当我只使用 clearInterval(rollInterval);或 $("#dwryBox").stop(true, false); 的时候发现不能完全停止，两个一起用才能完全停止