【自制】js广告轮显效果（兼容ie6）

注意事项：

1.依赖于jquery

2.图片父元素id值必须设置为'cont-img-box',最后一张图片要求和第一张图片相同;

3.选择控制色块的父元素id值必须设置为'cont-btn-box',并与图片父元素为兄弟元素

4.图片默认间隔时间为5000毫秒，允许重置间隔时间，用var time='间隔毫秒数';

5.图片的个数不限，但要求第一张图片和最后一张图片为同一张图片。

html代码在这里就不写了，使用ul、li即可。

js代码如下：

<span style="font-size:18px;">var l=$('#cont-img-box').css('left');
            var no=null;
            var time=5000;//控制广告图显示间隔时间
            var timer1=null;
            var timer2=null;
            //轮播
            function banner(){
                no=-1*Math.floor(parseInt(l)/$('#cont-img-box').children().width());
                if(parseInt(l)<=-1*($('#cont-img-box').children().length-1)*$('#cont-img-box').children().width()){
                    l=0;
                    no=-1*Math.floor(parseInt(l)/$('#cont-img-box').children().width());
                    num();
                }
                if(parseInt(l)%$('#cont-img-box').children().width()!=0){
                    l=parseInt(l)-20;
                    timer1=setTimeout(function(){
                        $('#cont-img-box').css('left',l);
                        banner();
                    },10);
                }else{
                    timer2=setTimeout(function(){
                        l=parseInt(l)-10;
                        banner();
                    },time);
                }
                num();
            }
            banner();
            //控制当前播放到哪张图的色块
            function num(){
                var bChose=$($('#cont-btn-box').children()[no]);
                bChose.siblings().css('background','#999');
                bChose.css('background','#009900');
            }
            //点击色块切换广告图
            $('#cont-btn-box li').each(function(index,domEle){
                $(this).click(function(){
                    no=index;
                    l=-1*index*$('#cont-img-box').children().width();
                    clearTimeout(timer1);
                    clearTimeout(timer2);
                    banner();
                    num();
                    $('#cont-img-box').animate({left:-1*index*$('#cont-img-box').children().width()},500);
                })
            });
            //鼠标在广告图区域内停止广告轮播
            $('#cont-img-box').children().mousemove(function(){
                clearTimeout(timer2);
            });
            //鼠标移出广告图区域开始广告自动轮播
            $('#cont-img-box').children().mouseout(function(){
                clearTimeout(timer1);
                banner();
            })
</span>