Question

下面的标记用于我的jQuery轮播小部件。第一个div用作当前所选模板缩略图的预览div。当任何缩略图图像上的轮播内发生用户鼠标悬停事件时，我希望更新预览图像以显示该图像的完整大小缩略图（然后恢复为默认的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

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);
   });

});

jQuery轮播＆gt;悬停在旋转木马图像上显示单独div中的完整大小预览

1 个答案: