var marquee = $("#marquee"); marquee.css({"overflow": "hidden", "width": "100%"}); marquee.wrapInner("<span>"); marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align": "center" }); marquee.append(marquee.find("span").clone()); marquee.wrapInner("<div>"); marquee.find("div").css("width", "200%"); var reset = function() { $(this).css("margin-left", "0%"); $(this).animate({ "margin-left": "-100%" }, 25000, 'linear', reset); }; reset.call(marquee.find("div")); 
 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <div class="string"> <div id="marquee" style="float:left;" > <a href="#"><img src="http://i.stack.imgur.com/kEirx.jpg" height="100" style="float:left;" /></a> <a href="#"><img src="http://i.stack.imgur.com/5IkA6.png" height="100" style="float:left;" /></a> <a href="#"><img src="http://i.stack.imgur.com/NzYHm.png" height="100" style="float:left;" /></a> </div> </div>

    1 answer 1

     var marquee = $("#marquee"); marquee.css({"overflow": "hidden", "width": "100%"}); marquee.wrapInner("<span>"); marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align": "center" }); marquee.append(marquee.find("span").clone()); marquee.wrapInner("<div>"); marquee.find("div").css("width", "200%"); var reset = function() { $(this).css("margin-left", "0%"); $(this).animate({ "margin-left": "-100%" }, 25000, 'linear', reset); $(this).hover(function() { $(this).stop(); }, function() { $(this).animate({ "margin-left": "-100%" }, 25000, 'linear', reset); }); }; reset.call(marquee.find("div")); 
     <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <div class="string"> <div id="marquee" style="float:left;" > <a href="#"><img src="http://i.stack.imgur.com/kEirx.jpg" height="100" style="float:left;" /></a> <a href="#"><img src="http://i.stack.imgur.com/5IkA6.png" height="100" style="float:left;" /></a> <a href="#"><img src="http://i.stack.imgur.com/NzYHm.png" height="100" style="float:left;" /></a> </div> </div>