jquery实现淡入淡出轮播效果

很简单的一个例子，总共不到50行代码，只是自己在做项目的时候通过一次又一次的修改优化和填坑，发现还是有很多容易忽略之处，于是便想着分享出来。

首先，根据banner图数量，动态显示分页器的数量，这里万不可写死，否则重复利用率将会极低

var index = 0;

var imgLen = $(".banner-ul > li").length;

$(".banner-ul > li:eq(0)").show()

for(var i = 0;i < imgLen; i++){

    $(".banner-dot").append("<span></span>");  //根据轮播图片的数量自动显示分页器数量

    $(".banner-dot > span").eq(0).addClass("actived");

}

其次，有些时候会出现只有一张banner图的情况，这种情况下我们就让图片静止没有任何动态效果

if(imgLen > 1){ //当轮播图片数大于1的时候，才显示轮播

    //todo

} else{

    $(".banner-dot,.arrow-btn").hide();  //只有1副的时候不显示左右箭头和分页器，不作轮播动画

}

主体部分功能实现：

1、根据banner图的index值得来封装一个公共的轮播效果，接下来所有功能都是要调用这个函数

var selectImg = function(index){

        $(".banner-ul > li").eq(index).fadeIn(1000).siblings().fadeOut(1000);

        $(".banner-dot > span").eq(index).addClass("actived").siblings().removeClass("actived");

    }

2、分页器点击效果，把每个分页器的index值（即$(this).index()）赋给参数index

$(".banner-dot > span").click(function(){

        index = $(this).index()

        selectImg(index)

    });

3、左右箭头的点击切换效果，区别在于，分别为index++和index--

var transformRight = function(){

        if(index === imgLen - 1){

            index = 0;

        } else{

            index++;

        }

        selectImg(index);

    };

    var transformLeft = function(){

        if(index === 0){

            index = imgLen - 1;

        } else{

            index--;

        }

        selectImg(index);   

    }

$(".index-banner").children(".right").click(function(){

        transformRight();   

    });

    $(".index-banner").children(".left").click(function(){ 

        transformLeft();   

    });

4、最后一步，可根据需要实现自动播放，播放的函数为transformRight()，即向右点击播放效果

var timer = setInterval(transformRight,5000);

    $(".index-banner").mouseover(function(){

        clearInterval(timer)

    }).mouseout(function(){

        timer = setInterval(transformRight,5000);

    });

这样，一个最简单的轮播图播放效果就做好了

html和css中没有需要特别注意的，只需将每个图片设为隐藏，然后再html中显示第一张图片即可

.banner-ul > li{

    height: 500px;

    width: 100%;

    position: absolute;

    overflow: hidden;

    background-repeat: no-repeat;

    background-position: center;

    background-size: auto 100%;

    display: none;

}