图片轮播用fadeIn()渐显图片 快速切换问题

因为fadeIn()显示图片不是及时显示，当鼠标悬浮在按钮上迅速切换时，上一张图片有可能再鼠标悬浮在下一个按钮上时再显示,这时可在fadeIn()方法前使用stop(false,true)停止动画；

stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。

stop在新版jQuery中添加了2个参数：

第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；

第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候

stop(false)：不停止被选元素所有加入队列的动画，仅停止当前的动画。

stop(true)：停止所有加入队列的动画。

stop(false,true)：直接停止当前动画，并跳转至当前动画的最终末尾效果位置，接着正常执行后面的动画队列，直至完成整个动画。

---

html

<div>

    <img src="" alt="">

    <img src="" alt="">

    <img src="" alt="">

</div>

<div>

    <img src="" alt="">

    <img src="" alt="'>

    <img src="' alt="">

</div>

---

script

$(function(){

    $(".dot a").hover(function(){

        showBanner($(this).index());

        stopAm();

    },function(){

        startAm();

    });

    var currentindex = 0;

    var timerID = null ;

    function showBanner(i){

        currentindex = i ;

        $(".banner img:eq("+i+")").stop(false,true).fadeIn().siblings('img').hide();

        $(".dot a:eq("+i+") img").attr('src',"/{$_CLIENT}/images1/dot_on.png");

        $(".dot a:eq("+i+")").siblings().find('img').attr('src',"/{$_CLIENT}/images1/dot.png");

    }

    function startAm(){

        if(timerID){

            return;

        }

        timerID = setInterval(timer_tick,3000);

    }

    function stopAm(){

        if(timerID){

            clearInterval(timerID);

            timerID = null;

        }

    }

    function timer_tick(){

        totalNum = $('.dot a').length;

        currentindex = currentindex

}

startAm();

})