OK so in my html head I have:
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var marquee = $(".thumb_holder");
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%" }, 10000, 'linear', reset);
};
reset.call(marquee.find("div"));
});
</div></span></script>
</script>
And in my html body I have:
<div class="thumb_holder" style="overflow: hidden; float: left; height: 131px; width: 435px;">
<a class="group1" href="../images/marquee/image_1.jpg" title="">
<img src="../images/marquee/thumbs/image_1.jpg" style="float: left; border: 1px solid #a5a1a0;" />
</a>
<a class="group1" href="../images/marquee/image_2.jpg" title="">
<img src="../images/marquee/thumbs/image_2.jpg" style="float: left; margin-left: 10px; border: 1px solid #a5a1a0;" />
</a>
<a class="group1" href="../images/marquee/image_3.jpg" title="">
<img src="../images/marquee/thumbs/image_3.jpg" style="float: left; margin-left: 10px; border: 1px solid #a5a1a0;" />
</a>
<a class="group1" href="../images/marquee/image_4.jpg" title="">
<img src="../images/marquee/thumbs/image_4.jpg" style="float: left; margin-left: 10px; border: 1px solid #a5a1a0;" />
</a>
<a class="group1" href="../images/marquee/image_5.jpg" title="">
<img src="../images/marquee/thumbs/image_5.jpg" style="float: left; margin-left: 10px; border: 1px solid #a5a1a0;" />
</a>
<a class="group1" href="../images/marquee/image_6.jpg" title="">
<img src="../images/marquee/thumbs/image_6.jpg" style="float: left; margin-left: 10px; border: 1px solid #a5a1a0;" />
</a>
</div>