// javascript document (function () { $.fn.scrollimg = function () { function repeat(str, n) { return new array( n + 1 ).join(str); } return this.each(function () { // magic! var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul').width(9999), $items = $slider.find('> li'), $single = $items.filter(':first') singlewidth = $single.outerwidth(), visible = math.ceil($wrapper.innerwidth() / singlewidth), currentpage = 1, pages = math.ceil($items.length / visible); /* tasks */ // 1. pad the pages with empty element if required if ($items.length % visible != 0) { // pad $slider.append(repeat('
', visible - ($items.length % visible))); $items = $slider.find('> li'); } // 2. create the carousel padding on left and right (cloned) $items.filter(':first').before($items.slice(-visible).clone().addclass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addclass('cloned')); $items = $slider.find('> li'); // 3. reset scroll $wrapper.scrollleft(singlewidth * visible); // 4. paging function function gotopage(page) { var dir = page < currentpage ? -1 : 1, n = math.abs(currentpage - page), left = singlewidth * dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollleft : '+=' + left }, 500, function () { // if page == last page - then reset position if (page > pages) { $wrapper.scrollleft(singlewidth * visible); page = 1; } else if (page == 0) { page = pages; $wrapper.scrollleft(singlewidth * visible * pages); } currentpage = page; }); } // 5. insert the back and forward link $wrapper.after('<>'); // 6. bind the back and forward links $('a.back', this).click(function () { gotopage(currentpage - 1); return false; }); $('a.forward', this).click(function () { gotopage(currentpage + 1); return false; }); $(this).bind('goto', function (event, page) { gotopage(page); }); // this is new code for the automatic infinite carousel $(this).bind('next', function () { gotopage(currentpage + 1); }); }); }; })(jquery); $(document).ready(function () { // this is new code for the automatic infinite carousel var autoscrolling = false; if($('.imgwrap ul > li').length>0) { $('.scrollimg').scrollimg().mouseover(function () { autoscrolling = false; }).mouseout(function () { autoscrolling = true; }); setinterval(function () { if (autoscrolling) { $('.scrollimg').trigger('next'); } }, 5000); } });