1

HTML：

<div class="slide">
  <div class="left">
    <img src="img-lg.png" class="image1" />
  </div>
  <div class="thumbs">
    <img src="img-sm.png" />
  </div>
</div>

<div class="slide">         
  <div class="left">
    <img src="anotherimg-lg.png" class="image1" />
  </div>
  <div class="thumbs">
    <img src="anotherimg-sm.png" />
  </div>    
</div>

查询：

var originalContent = $('.left').html();
$("div.thumbs img").hover(function(){
  var largesrc = $(this).attr("src").replace("sm","lg");
  $(".left").html('<img src="' + largesrc 
    + '" width="560" height="377" class="largeimage" />');
}, function() {
  $(".left").html(originalContent);
});

我在悬停时用较小的图像替换大图像，然后恢复为原始图像。这很好用，但我不知道如何让它与多个实例一起工作。

在第二张幻灯片中，左图被原始的第一张左图代替，而不是第二张。

4

2 回答 2

4

怎么样

$("div.thumbs img").hover(function(){
        $(this).closest('.slide').find('.left img').attr({
            src: this.src.replace("sm","lg"),
            width: 560,
            height: 377,
            'class': 'largeimage'
        });
}, 
function() {
        var img = $(this).closest('.slide').find('.left img');
        img.attr({src: img[0].src.replace("lg","sm")})
        .removeAttr('width height class');
});

在这里，您交换了src图像元素的属性，而不修改 dom 结构。

演示

于 2012-11-06T05:58:45.123 回答
0 
$("div.thumbs img").hover(function(){
  var $this = $(this);

  // find the containing .slide, then find .left within that
  var left = $this.closest('.slide').find('.left');

  // store the original content as "data" on `left`, so
  // we can get it easily in the future
  left.data('originalContent', left.html());

  var largesrc = $this.attr("src").replace("sm","lg");
  left.html('<img src="' + largesrc 
    + '" width="560" height="377" class="largeimage" />');
}, function() {
  var $this = $(this);
  var left = $this.closest('.slide').find('.left');

  // fetch the "data" we stored earlier, and restore it
  left.html(left.data('originalContent'));
});

这里有一个活生生的例子。

于 2012-11-06T06:09:55.290 回答