js 三种效果动画 轮播

在 公司因为做网站时，图片轮播做的比较多，然后就整理了下，结果目前就三种效果动画轮播的。

先上代码先

function powerPoint(gd) {
    var settings = {
        timer: 5000, //计时器时间
        timerId: 0, //计时器ID
        container: "ul", //图片集容器
        imgContainer: "img", //图片容器
        currentIndex: 0, //当前播放索引
        animateTimer: 1000, //动画事件
        imgCount: 1, //图片集数量
        style: "fade", //动画效果   scroll,slide,scrollexact
        callback: function (d) { } //每次执行动画效果
    };
    var extend = {
        preIndex: 0,
        version: "0.0.0.1",
        animate: null
    }
    powerPoint.prototype.version = extend.version;
    //#start 设置重新应用
    powerPoint.prototype.setting = function (setting) {
        if (setting == undefined || setting == null) {
            return;
        }
        if (typeof setting != "object") {
            return;
        }
        settings.timer = typeof setting.timer == "number" ? setting.timer :
                         typeof setting.timer == "string" ? parseInt(setting.timer) : 5000;
        settings.container = setting.container == undefined || setting.container == null || setting.container == "" ? "ul" :
                                                                                                                        setting.container;
        settings.imgContainer = setting.imgContainer == undefined || setting.imgContainer == null || setting.imgContainer == "" ?
                                        "img" : setting.imgContainer;
        settings.callback = typeof setting.callback == "function" ? setting.callback : function () { };
        settings.style = typeof setting.style == "string" ? setting.style : "fade";
        settings.animateTimer = typeof setting.animateTimer == "number" ? setting.animateTimer :
                                typeof setting.animateTimer == "string" ? parseInt(setting.animateTimer) : 5000;

        //#start 初始化
        settings.imgCount = $(settings.container + " " + settings.imgContainer).length;
        //#end  初始化
    }
    //#end 设置重新应用

    powerPoint.prototype.getSettings = function () {
        return settings;
    }
    powerPoint.prototype.start = function () {
        settings.timerId = window.setInterval(this.animate, settings.timer);
    }
    powerPoint.prototype.stop = function () {
        window.clearInterval(settings.timerId);
    }

    powerPoint.prototype.restart = function () {
        settings.currentIndex = 0;
        settings.timerId = window.setInterval(this.animate, settings.timer);
    };

    //#start   上一页
    powerPoint.prototype.pre = function () {
        extend.preIndex = settings.currentIndex;
        settings.currentIndex--;
        if (settings.currentIndex < 0) {
            settings.currentIndex = 0;
            return;
        }
        switch (settings.style) {
            case "scroll": extend.animate = animateScroll(); break;
            case "slide": extend.animate = animateSlide(); break;
            case "fade":
            default: extend.animate = animateFade(); break;
        }
        settings.callback(settings.currentIndex);
    }
    //#end  上一页
    //#start 下一页
    powerPoint.prototype.next = function () {
        extend.preIndex = settings.currentIndex;
        settings.currentIndex++;
        if (settings.currentIndex > settings.imgCount - 1) {
            settings.currentIndex = settings.imgCount;
            return;
        }
        switch (settings.style) {
            case "scroll": extend.animate = animateScroll(); break;
            case "slide": extend.animate = animateSlide(); break;
            case "fade":
            default: extend.animate = animateFade(); break;
        }
        settings.callback(settings.currentIndex);
    }
    //#end  下一页
    //#start  动画执行
    ///#
    //#param index:如果为undefined或者null 则执行自增长
    //#introduction 每次执行都会调用callback传递当前的图片索引   
    ///#
    powerPoint.prototype.animate = function (index) {

        console.log(extend.preIndex);
        if (index == undefined || index == null) {
            extend.preIndex = settings.currentIndex;
            settings.currentIndex++;
        } else {
            extend.preIndex = settings.currentIndex;
            settings.currentIndex = parseInt(index);
        }
        if (settings.currentIndex > settings.imgCount - 1) {
            settings.currentIndex = 0;
        }
        switch (settings.style) {
            case "scroll": animateScroll(); break;
            case "slide": animateSlide(); break;
            case "fade":
            default: animateFade(); break;
        }
        settings.callback(settings.currentIndex);
    }
    //#end   动画执行
    //#start 动画执行--执行淡进淡出
    function animateFade() {
        $(settings.container + " " + settings.imgContainer).eq(settings.currentIndex).siblings().fadeOut(settings.animateTimer / 2).end().fadeIn(settings.animateTimer);
    }
    //#end
    //#start  动画执行--执行滚动
    function animateScroll() {
        var width = $(settings.container + " " + settings.imgContainer).eq(extend.preIndex).outerWidth(true)
        var left = parseInt(width) * settings.currentIndex;
        $(settings.container).animate({ "margin-left": "-" + left + "px" }, settings.animateTimer);
    }
    function animateSlide() {
        if (settings.currentIndex == extend.preIndex) {
            return;
        }
        $(settings.container + " " + settings.imgContainer).eq(extend.preIndex).slideUp(settings.animateTimer);
        $(settings.container + " " + settings.imgContainer).eq(settings.currentIndex).slideDown(settings.animateTimer);
    }
    //#end  动画执行--执行滚动
    if (typeof gd == "object") {
        this.setting(gd);
        this.start();
    }
}

 

var ppt = new powerPoint();

ppt.setting({    

　　timer:4000,//计时器时间    

　　container:".imgs_container",//图片集的容器，    

　　 imgContainer:"one_img_container",//图片的容器。就是包裹图片的标签    

　　 animateTimer:1000,//执行动画的时间    

　　style："fade",//效果的样式，目前只有三种，分别是fade，slide，scroll    

　　callback：function(d){},//计时器每次执行动画效果的回调方法，参数d为当前动画图片效果索引    

});

ppt.start();//开始执行轮播，停止之后可以调用此函数继续轮播

ppt.stop();//停止轮播

ppt.pre();//上一页，

ppt.next（);//下一页,

ppt.getSettings();//获取当前设置

ppt.restart();//重新开始执行轮播，所有索引值置0

ppt.animate(index);//索引为index的图片执行动画显示。如果index为null，则为执行类似下一页的功能

上面是一种方法，执行轮播。可以使用简单的方法进行设置

var ppt = new powerPoint({    

　　timer:4000,//计时器时间    

　　container:".imgs_container",//图片集的容器，    

　　imgContainer:"one_img_container",//图片的容器。就是包裹图片的标签    

　　animateTimer:1000,//执行动画的时间    

　　style："fade",//效果的样式，目前只有三种，分别是fade，slide，scroll    

　　callback：function(d){},//计时器每次执行动画效果的回调方法，参数d为当前动画图片效果索引    

});

 

 

其他的一样，具体应用参照函数意思。。。

可能有些效果做的不是很好，但是一些还是可以的。如果大家看到有更好的方式，希望能贴出来给我参考下。。。至于动画样式slide和fade都测试，scroll可能有点问题。。