jQuery的转盘>悬停在转盘图像示出了在一个单独的div

Question

的标记下面用于我的jQuery转盘插件全尺寸预览。第一个div用作当前选定模板缩略图的预览div。当鼠标悬停事件发生在轮播内部的任何缩略图图像上时，我希望更新预览图像以显示该图像的全尺寸缩略图（然后恢复为默认的鼠标悬停）。

转盘图像和预览图像的大小相同，我只是通过CSS设置转盘图像的大小显得更小。

//this is my full size preview image 
<div class="selectedImage"> 
    <img src="../wp-content/themes/mytheme/screenshot.jpg" /> 
</div> 
// this is the element that moves the carousel images 
<a href="#"><img class="prev" src="../wp-content/themes/mytheme/more.jpg" /></a> 

//This is the carousel. I'd like hover events to update the preview image 
// with the mouseover image, but revert back to the default onmouseout. 
<div class="carousel"> 
    <ul> 
     <li><img src="../wp-content/themes/mytheme/screenshot1.jpg" class="selected" /></li> 
     <li><img src="../wp-content/themes/mytheme/screenshot2.jpg" class="selected" /></li> 
     <li><img src="../wp-content/themes/mytheme/screenshot3.jpg" class="selected" /></li>   
    </ul> 
</div> 

btw，我使用jcarousellite_1.0.1.min.js插件为旋转木马。

Answer 1

DEMO：http://jsbin.com/uyupu

$(function() { 
    $(".carousel").jCarouselLite({ 
     btnNext: ".next", 
     btnPrev: ".prev" 
    }); 

    $('.carousel ul li').hover(function(e) { 

    var img_src = $(this).children('img').attr('src'); 
    $('.selectedImage img').fadeOut(200).attr('src',img_src).fadeIn(200); 

} 
,function() { 

//do here what you want, or simply hide image! 
$('.selectedImage img').fadeOut(200); 
    }); 

});