15、jQuery插件之slider幻灯片插件(可悬停控制)

slider.js代码:
/**

 * slider插件可悬停控制

 */

; $(function ($, window, document, undefined) {

    

    Slider = function (container, options) {

        /*

        options = {

            auto: true,

            time: 3000,

            event: 'hover' | 'click',

            mode: 'slide | fade',

            controller: $(),

            activeControllerCls: 'className',

            exchangeEnd: $.noop

        }

        */

        "use strict"; //stirct mode not support by IE9-

        if (!container) return;

        var options = options || {},

            currentIndex = 0,

            cls = options.activeControllerCls,

            delay = options.delay,

            isAuto = options.auto,

            controller = options.controller,

            event = options.event,

            interval,

            slidesWrapper = container.children().first(),

            slides = slidesWrapper.children(),

            length = slides.length,

            childWidth = container.width(),

            totalWidth = childWidth * slides.length;

        function init() {

            var controlItem = controller.children();

            mode();

            event == 'hover' ? controlItem.mouseover(function () {

                stop();

                var index = $(this).index();

                play(index, options.mode);

            }).mouseout(function () {

                isAuto && autoPlay();

            }) : controlItem.click(function () {

                stop();

                var index = $(this).index();

                play(index, options.mode);

                isAuto && autoPlay();

            });

            isAuto && autoPlay();

        }

        //animate mode

        function mode() {

            var wrapper = container.children().first();

            options.mode == 'slide' ? wrapper.width(totalWidth) : wrapper.children().css({

                'position': 'absolute',

                'left': 0,

                'top': 0

            })

                .first().siblings().hide();

        }

        //auto play

        function autoPlay() {

            interval = setInterval(function () {

                triggerPlay(currentIndex);

            }, options.time);

        }

        //trigger play

        function triggerPlay(cIndex) {

            var index;

            (cIndex == length - 1) ? index = 0 : index = cIndex + 1;

            play(index, options.mode);

        }

        //play

        function play(index, mode) {

            slidesWrapper.stop(true, true);

            slides.stop(true, true);

            mode == 'slide' ? (function () {

                if (index > currentIndex) {

                    slidesWrapper.animate({

                        left: '-=' + Math.abs(index - currentIndex) * childWidth + 'px'

                    }, delay);

                } else if (index < currentIndex) {

                    slidesWrapper.animate({

                        left: '+=' + Math.abs(index - currentIndex) * childWidth + 'px'

                    }, delay);

                } else {

                    return;

                }

            })() : (function () {

                if (slidesWrapper.children(':visible').index() == index) return;

                slidesWrapper.children().fadeOut(delay).eq(index).fadeIn(delay);

            })();

            try {

                controller.children('.' + cls).removeClass(cls);

                controller.children().eq(index).addClass(cls);

            } catch (e) { }

            currentIndex = index;

            options.exchangeEnd && typeof options.exchangeEnd == 'function' && options.exchangeEnd.call(this, currentIndex);

        }

        //stop

        function stop() {

            clearInterval(interval);

        }

        //prev frame

        function prev() {

            stop();

            currentIndex == 0 ? triggerPlay(length - 2) : triggerPlay(currentIndex - 2);

            isAuto && autoPlay();

        }

        //next frame

        function next() {

            stop();

            currentIndex == length - 1 ? triggerPlay(-1) : triggerPlay(currentIndex);

            isAuto && autoPlay();

        }

        //init

        init();

        //expose the Slider API

        return {

            prev: function () {

                prev();

            },

            next: function () {

                next();

            }

        }

    };

}(jQuery, window, document));

<!-- 首页轮播图片 轮播js 广告-->
<script src="/Template/pc/default/Static/js/slider.js"></script>
<script type="text/javascript">
// 首页轮播图片 轮播js 广告
$(function() {
    var bannerSlider = new Slider($('#banner_tabs'), {
        time: 5000,
        delay: 400,
        event: 'hover',
        auto: true,
        mode: 'fade',
        controller: $('#bannerCtrl'),
        activeControllerCls: 'active' //幻灯片小光标的选中状态时的类名
    });
    $('#banner_tabs .flex-prev').click(function() {
        bannerSlider.prev()
    });
    $('#banner_tabs .flex-next').click(function() {
        bannerSlider.next()
    });
})
</script>
<!-- 首页轮播图片 轮播js 广告 end-->
<!--------banner-开始-------------->
    <div class="nav-banner">
        <div id="banner_tabs" class="flexslider">
            <ul class="slides">               
            <li>
                    <a href="/index.php?m=Home&c=Goods&a=goodsInfo&id=1" >                       
                        <img src="/Public/upload/banner/2015/11-04/563a014600063.jpg" width="980" height="400"  title="" style=""/>
                    </a>
                </li><li>
                    <a href="/index.php?m=Home&c=Goods&a=goodsInfo&id=1" >                       
                        <img src="/Public/upload/banner/2015/11-04/563a01ccb5dc9.jpg" width="980" height="400"  title="" style=""/>
                    </a>
                </li>         
            </ul>
            <!--<ul class="flex-direction-nav">
                <li><a class="flex-prev" href="javascript:;">Previous</a></li>
                <li><a class="flex-next" href="javascript:;">Next</a></li>
            </ul>-->
            <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
             <li><a>0</a></li><li><a>1</a></li>   
            </ol>
        </div> 
    </div>
<!--------banner-结束-------------->