基于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