var slider; $(function() { var slideInterval = 0; slider = new ItfSlider(); $('#arrowLeft').click(function() { slider.moveRight(230, 150); }); $('#arrowRight').click(function() { slider.moveLeft(230, 150); }); $('#arrowLeft').mouseover(function() { slider.moveRight(230, 1500); slideInterval = setInterval(function() { slider.moveRight(230, 1500); }, 1500); }); $('#arrowLeft').mouseout(function() { clearInterval(slideInterval); slider.stop(); }); $('#arrowRight').mouseover(function() { slider.moveLeft(230, 1500); slideInterval = setInterval(function() { slider.moveLeft(230, 1500); }, 1500); }); $('#arrowRight').mouseout(function() { clearInterval(slideInterval); slider.stop(); }); }); var ItfSlider = function(o) { var opts = $.extend({ 'jq': '#slider', 'ul': '#sliderTabs', 'li': '.tab', 'width': 960, 'liWidth': 230, 'leftArr': '#arrowLeft', 'rightArr': '#arrowRight' }, o); this.jq = $(opts.jq); this.ul = $(opts.ul); this.lis = this.ul.find(opts.li); this.leftArr = $(opts.leftArr); this.rightArr = $(opts.rightArr); this.width = opts.width; this.liWidth = opts.liWidth; this.contentWidth = this.liWidth * this.lis.length; this.maxLeft = 0 - (this.contentWidth - this.width + 70); this.getLeft = function() { return parseInt(this.ul.css("left").replace("px", "")); }; this.positionArrow = function() { var arrLeft = (0 - this.getLeft()) + (this.contentWidth - 10); console.log(arrLeft); this.rightArr.animate({'left': arrLeft + "px"}); }; this.stop = function() { this.ul.stop(); }; }; ItfSlider.prototype.moveLeft = function(distance, speed) { if (typeof(distance) == 'undefined') { distance = this.liWidth; } this.ul.stop(); var left = this.getLeft(); if (left > this.maxLeft) { var newLeft = left - distance; if (newLeft < this.maxLeft) { newLeft = this.maxLeft; } this.ul.animate({"left": newLeft + "px"}, speed); // this.positionArrow(); } }; ItfSlider.prototype.moveRight = function(distance, speed) { if (typeof(distance) == 'undefined') { distance = this.liWidth; } this.ul.stop(); var left = this.getLeft(); if (left <= 0) { var newLeft = left + distance; if (newLeft > 0) { newLeft = 0; } this.ul.animate({'left': newLeft + "px"}, speed); // this.positionArrow(); } };