Edit in JSFiddle

$('#arrow').click(function() {
    $('li:first').after($('li#arrow_li').prev());
});

<div id="logos">
    <ul>
        <li style="float:left; margin-left:-30px; "><img src="http://www.ssvworks.com/images/arctic_cat_logo2.png" width="300" height="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://homeflooringonline.com/product_image/Area/logo-rugs-auburn-universi836.jpg" height="130" width="130" /></li>
        <li id="arrow_li"><img src="http://china.keyence.com/products/sensors/fiberoptic/fsn/problem_arrow2.gif" height="130" width="60" id="arrow" /></li>
    </ul>
</div>

#logos { width:830px; position: absolute; left: 89px; top: 120px; }
#logos ul { list-style:none; float:right; overflow:hidden; }
#logos ul li { display:inline; margin:0 0 0 5px; }
.clear { height:30px; width:100%; clear:both; }