logo slide
logo slide
Hi,
I'm new to this forum and jquery.
I just made a simple logo slider which needs to be animated.
check it here:
test
Now I want to animate these logos (left or right) infinitely maybe with animate() function, could anybody help me?
I write the basic code here:
Html:
-
<div id="content" align="center">
<a href="" id="left" class="arrow"></a>
<div id="logos"></div>
<a href="" id="right" class="arrow"></a>
</div>
Css:
-
#content {width:960px;height:63px;margin: 300px 15px;text-align:left;clear:both;}
#logos {float:left;width:878px;height:61px;}
#logos a img{border:0;clear:both;}
Javascript:
-
var list = new Array();
list[1] = "Logo1.jpg, http://www.test1.com";
list[2] = "Logo2.jpg, http://www.test2.com";
list[3] = "Logo3.jpg, http://www.test3.com";
$(document).ready(function() {
$("#logos").hide();
//append logos
for (i=1;i<list.length;i++) {
value = list[i].split(",");
$("#logos").append("<a href='" + value[1] + "' target= '_blank'><img src='logos/" + value[0] + "'width='75' class='img'></a>");
}
//wait for loading images
$('img.img').load(function(){
//show logos
$("#logos").animate({ width: 'show', opacity:'show'}, 1000)
});
});