jquery list item per image

I have 3 images and an unordered list with 3 items, using jQuery how can I get 1 image to show in the correct order on hover. Its hard to explain so I'll give you some code

<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />

<ul>
   <li><a href="#">item 1</a></li>
   <li><a href="#">item 2</a></li>
   <li>开发者_开发技巧;<a href="#">item 3</a></li>
</ul>

when you hover over item 1, image 1 will show when you hover over item 2, image 2 will show and so on...

any suggestions guys?

I'd suggest something like the following, assuming you want the image to hide again once the pointer moves off the li:

$('li').hover(
function(){
 var i = $(this).index('li');
 $('img').eq(i).show();
},
function(){
 var i = $(this).index('li');
 $('img').eq(i).hide();
});

JS Fiddle demo.

You'll need to alter the selectors to make sure you don't select unintended elements:

$("ul li").hover( function() {
    //Hide all the images, then select the nth image, where n is the index of the hovered item, and show it
    $("img").hide().eq( $(this).index() ).show();
},
function() {
    //On mouseleave, hide all images.
    $("img").hide();
});

<div id="images">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
</div>

<ul id="list">
   <li><a href="#">item 1</a></li>
   <li><a href="#">item 2</a></li>
   <li><a href="#">item 3</a></li>
</ul>

$("#list li").hover(function(){$("images img").eq($(this).index()).fadeToggle();})

That'll do it.