jquery的fadeTo方法的淡入淡出轮播图插件

　　由于对基于jquery的简单插件开发有了一定的了解，慢慢的也对基于jquery的插件开发有了兴趣，在上班结束之后就研究各种插件的思路逻辑。最近开发了一款基于jquery的fadeTo方法的轮播图插件，下面给大家介绍具体的思路逻辑：

整体思路：

　　fadeTo方法就是在指定时间内将某个选定元素的透明度改变来达到某个元素隐藏与显示的效果，借助这个方法，刚开始我们只需要让第一张图片的透明度为1，其他的都为0，这样就只能看到一张图片，建立图片索引，在轮播的时候只需要让索引自增，当索引等于最大值时，将索引值置为1就有可以重新开始轮播，实现循环轮播；

具体逻辑：

　　1、在html页面中给定的div中加载要轮播的图片，向前 < 和向后 > 的按钮；

　　2、在HTML页面中给定的div中加载图片索引按钮（小圆圈），样式自己定义；

　　3、建立图片索引变量index,赋初值为1；

　　4、建立图片显示函数showImg（）,用fadeTo实现指定时间内图片透明度的改变，实现轮播；

　　5、建立向前 < 按钮方法，实现图片切换；

　　6、建立向后 > 按钮方法，实现图片切换；

　　7、建立图片索引按钮，实现点击索引按钮跳转指定图片；

说了这么多，大家可能还是一脸懵逼，光说不练假把式，这就给大家附上代码，方便大家查看；

　　

/*
    该轮播图插件是基于jquery开发的，利用jquery的fadeTo()方法实现图片的轮播
    我们只需要图片和小圆圈按钮的索引一一对应起来就可以咯
*/
var hbt_imgList = $(".hbt-con");//获取图像列表<li>对象
var hbt_littelBtn = $("#hbt-goTab a");//获取图像下边按钮对象
var hbt_contain = $(".hbt-tab")//获取整个图像容器对象，便于书写鼠标移入停止轮播移除继续轮播
var hbt_index = 1;//图像轮播索引，即轮播第几章图片
var hbt_prev = $("#hbt-prev");//获取图片向前轮播按钮
var hbt_next = $("#hbt-next");//获取图片向后轮播按钮
var timer;//定时器变量
var hbt_length = $("#hbt-goTab a").length;//获取下面小按钮的数量，对应索引

$(document).ready(function(){
    /*hbt_contain.mouseover(function(event) {
        stop();
    });
    hbt_contain.mouseout(function(event) {
        play();
    });*/
    hbt_contain.on({
        mouseover:function(){//鼠标移入停止轮播
            stop();
        },
        mouseout:function(){//鼠标移出开始轮播
            play();
        }
    });
    hbt_prev.on("click",function(){//向前按钮点击处理事件
        hbt_index -= 1;
        if(hbt_index < 1){//索引超出最小值将其值设置为8
            hbt_index = 8;
        }
        hbtShowImg();
        hbtShowBtn();
    });
    hbt_next.on("click",function(){//向后按钮点击处理事件
        hbt_index += 1;
        if(hbt_index > 8){//索引超出最大值将其值设置为1
            hbt_index = 1;
        }
        hbtShowImg();
        hbtShowBtn();
    });
    for (var i = 0; i < hbt_length; i++) {  //循环绑定下面按钮的点击事情
        (function (i) {
            hbt_littelBtn[i].onclick = function () {
                hbt_index = i + 1;
                hbtShowImg();
                hbtShowBtn();
            }
        })(i)
    }
});

function play(){//开始轮播
    timer = setInterval(function(){
        hbt_index += 1;
        if(hbt_index > hbt_length){//索引超出最大值将其值设置为1
            hbt_index = 1;
        }
        hbtShowImg();
        hbtShowBtn();
    },4000)
}

function stop(){//停止轮播
    clearInterval(timer);
}

function hbtShowImg(){//图片轮播梳理
    for (var i = 0; i < hbt_length; i++) {
    //注意，list索引是从0开始的，所以第一张图片和第一个按钮对应索引是0二不是1
        if(hbt_imgList.eq(i).css("opacity") == 1){
            hbt_imgList.eq(i).fadeTo(2000,0);
        }
    }
    hbt_imgList.eq(hbt_index - 1).fadeTo(2000,1);
}

function hbtShowBtn(){//小按钮切换梳理
    for (var i = 0; i < hbt_length; i++) {
        if(hbt_littelBtn.eq(i).hasClass('itemActive')){
            hbt_littelBtn.eq(i).removeClass('itemActive');
            hbt_littelBtn.eq(i).addClass('item');
        }
    }
    hbt_littelBtn.eq(hbt_index - 1).addClass('itemActive');
}
play();

　　这边给大家的只是js的相关代码，有需要整个插件代码的，请点击这里到我的github下载相关代码进行查看；

　　最后要给大家提醒的就是引用的时候一定要先引入jquery哦；