setting and index in a css id - how?

setting and index in a css id - how?

In this code snip I want to be able to click an item i list-handbag and I then get the index li and with that index I want to animate the same index value in slideshow. How do I set that? Ex.:

slideshow[index[list-handbag]].animate (.....

what syntax can I use to do something on the slideshow img's?


------------
<div id="slideshow" style="width:100%;height:100%;">
<img src="/wp-content/themes/giovanni/images/handbag1.jpg" height="100%" alt="" />
<img src="/wp-content/themes/giovanni/images/handbags/viggiamo.jpg" height="100%" alt="" />
<img src="/wp-content/themes/giovanni/images/handbags/prison.jpg" height="100%" alt="" />
<img src="/wp-content/themes/giovanni/images/handbags/check.jpg" height="100%" alt="" />
<img src="/wp-content/themes/giovanni/images/handbags/itelli.jpg" height="100%" alt="" />
</div>


<div id="list-handbags">
<li>Handbag</li>
<li>Viggiamo</li>
<li>Prissolo</li>
<li>Checkora</li>
<li>Itelli</li>
</div>





$('#list-handbags li').click(function(){
var idx = $('#list-handbags li').index(this);
//alert(idx);
if (idx != seli) {
$('#slideshow img'). val(seli).animate({opacity: 0.0},1000,function () {});
$('#slideshow img'). index(idx).animate({opacity: 1.0},1000,function () {});
                        ('#slideshow img') [dx].animate({opacity: 1.0},1000,function () {});
seli=idx;
}

});