基于jq, jquery.easie.js 开发面向对象通栏焦点图组件

<!--banner begin-->
<div class="banner min_width" id="one" style="">
<span class="foucL fouc"></span>
 <ul>
   <li style="background: url(./images/banner.jpg) no-repeat center top; height:454px;"><a href=""></a></li>
   <li style="background: url(./images/banner1.jpg) no-repeat center top; height:454px;"><a href=""></a></li>
   <li style="background: url(./images/banner2.jpg) no-repeat center top; height:454px;"><a href=""></a></li>
 </ul>
 <span class="foucR fouc"></span>

    <div class="foucdocs"></div>
</div>
<!--banner end-->
<script>
    $(function(){
        Scroll({
            dome:$(‘#one‘),
            next:$(‘.foucL‘),
            pre:$(‘.foucR‘)
        });
    })
</script>

;
(function ($, window, document, undefined) {
    function scroll() {
        this.num = 0;
        this.obj = this;
        this.dome = null;
        this.dome_ul = null;
        this.dome_li_lent = null;
        this.full_wit = null;
        this.timer = null;
        this.next = null;
        this.pre = null;
        this.settings = {
            times: 2000,
            way_annimate: ‘ease-out‘,
        };

    }

    scroll.prototype.init = function (opt) {
        var This = this;
        var pos_left = null;
        this.options = $.extend({}, this.settings, opt)
        this.dome = this.options.dome;
        this.dome_ul = this.dome.find(‘ul‘);
        this.dome_ul.append(this.dome_ul.find(‘li:first‘).clone())
        this.dome_li_lent = this.dome_ul.find(‘li‘).length;

        for (var b = 0; b < this.dome_li_lent; b++) {
            this.dome.find(‘.foucdocs‘).append(‘<span></span>‘);
        }

        this.dome.find(‘.foucdocs span‘).eq(0).addClass(‘focus_on‘);
        this.next = this.dome.find(this.options.next);
        this.pre = this.dome.find(this.options.pre);
        this.getwidth();
        this.timer = setInterval(gos, This.options.times);
        $(window).resize(function () {
            This.getwidth();
        })
        this.dome.hover(function () {
            This.next.show();
            This.pre.show();
            clearInterval(This.timer);
        }, function () {
            This.next.hide();
            This.pre.hide();
            This.timer = setInterval(gos, This.options.times);
        })

        function gos() {
            This.num++;
            if (This.num > (This.dome_li_lent - 1)) {
                This.num = 0;
            }
            This.dome.find(‘.foucdocs span‘).eq(This.num).addClass(‘focus_on‘).siblings(‘span‘).removeClass(‘focus_on‘)
            pos_left = (This.full_wit * This.num);
            This.dome_ul.stop().animate({left: -pos_left + ‘px‘}, This.options.way_annimate);
        }
        this.dome.find(‘.foucdocs span‘).mouseover(function () {
            This.num=$(this).index();
            pos_left = (This.full_wit * This.num);
            This.dome_ul.stop().animate({left: -pos_left + ‘px‘}, This.options.way_annimate);
            $(this).addClass(‘focus_on‘).siblings(‘span‘).removeClass(‘focus_on‘);
        })
        this.next.click(function () {
            gos();
        })
        this.pre.click(function () {
            This.num--;
            if (This.num < 0) {
                This.num = This.dome_li_lent - 1;
                console.log(This.num)
            }
            This.dome.find(‘.foucdocs span‘).eq(This.num).addClass(‘focus_on‘).siblings(‘span‘).removeClass(‘focus_on‘);a
            pos_left = (This.full_wit * This.num);
            This.dome_ul.stop().animate({left: -pos_left + ‘px‘}, This.options.way_annimate);
        })
    }

    scroll.prototype.getwidth = function () {
        this.full_wit = $(window).width();
        this.dome_ul.css({
            width: this.full_wit * this.dome_li_lent + ‘px‘,
        })
        this.dome_ul.find(‘li‘).css({
            width: this.full_wit + ‘px‘,
        })
    }

    window.Scroll = function (opt) {
        var litscoll = new scroll();
        litscoll.init(opt);

    }
})(jQuery, window, document);

git仓库地址：https://github.com/XINYUHAI77/jquery_full