jQuery旋转木马>悬停在旋转木马上图像在单独的div中显示全尺寸预览

Question

下面的标记用于我的jQuery carousel小部件。第一个div用作当前所选模板缩略图的预览div。当用户鼠标悬停事件发生在任何缩略图的carousel中时，我希望预览图像更新为显示该图像的全尺寸缩略图(然后恢复为默认的onmouseout)。

轮播图像和预览图像的大小相同，我只是通过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>

顺便说一句，我正在使用jcarousellite_1.0.1.min.js插件来实现旋转木马。

Answer 1

演示： 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);
   });

});