Question

我正想要一个小画廊。 1个大图像，下面有3个。单击下面的一个图像时，它将使用淡入淡出的动画更改主/大图像的img src。

html是 -

models

并且没有淡入淡出的javascript是....

    <div class="col-xs-12 col-sm-6">
        <div class="col-xs-12">
            <div class="col-xs-12 col-sm-12" style="padding-left: 5px; padding-right: 5px;">
                <img alt="Bentley Flying Spur" id="main1" src="img/gallery/flying-spur/1.JPG" style="border-bottom: 10px solid #fff;" width="100%" />
            </div>
            <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;">
                <a class="altimage1" href="" title="switch"><img alt="" src="img/gallery/flying-spur/1.JPG" width="100%" /></a>
            </div>
            <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;">
                <a class="altimage2" href="" title="switch"><img alt="" src="img/gallery/flying-spur/2.JPG" width="100%" /></a>
            </div>
            <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;">
                <a class="altimage3" href="" title="switch"><img alt="" src="img/gallery/flying-spur/3.JPG" width="100%" /></a>
            </div>
        </div>
        <h2>
            Flying Spur W12
        </h2>
        <p>
            Colour | <strong>Sapphire Blue</strong>
        </p>
        <p>
            Engine | <strong>6.0 litre twin-turbocharged W12</strong>
        </p>
        <p>
            Max Power | <strong>616 bhp / 460kW / 625 PS @ 6,000RPM</strong>
        </p>
        <p>
            Top Speed | <strong>199mph / 320km/h</strong>
        </p>
    </div>

和我为淡入淡出尝试的javascript是

    $(function () {
    $('.altimage1').click(function () {
        $("#main1").attr('src', "img/gallery/flying-spur/1.JPG");
        return false;
    });
});

但这只是刷新页面。任何见解将不胜感激

Answer 1

不知道＃main4是什么，你调用淡入淡出函数的方式并没有多大意义。因为它们是异步的，你一定会遇到一些平滑问题...

更好的方法是：

$('.altimage12').click(function () {

    $("#main4").fadeOut(400, function() {

    // 1st fadeout complete so now change the image
    $("#main4").attr('src', "img/gallery/1951/3.JPG");

    // and now fade in again
    $("#main4").fadeIn(400);

});


    return false;
});

现在确保您已预加载图像以获得更平滑的动画

e.g。

var images = new Array()

function preload() {
  for (i = 0; i < preload.arguments.length; i++) {
    images[i] = new Image()
    images[i].src = preload.arguments[i]
  }
}
preload(
  "http://your.site/img/gallery/1951/1.JPG",
  "http://your.site/img/gallery/1951/2.JPG",
  "http://your.site/img/gallery/1951/3.JPG",
)

Answer 2

我没有找到$('.altimage12')和$("#main4")，但是与其他选择器一起运行良好。

$('#main1').click(function () {
    console.log('click');
    $("#main1").fadeOut(400);
    $("#main1").attr('src', "http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-glossy-orange-orbs-icons-business/105429-3d-glossy-orange-orb-icon-business-tool-hammer4-sc44.png");
    $("#main1").fadeIn(400);
    return false;
});

https://jsfiddle.net/chukanov/aw7u2sL8/2/

Answer 3

我修复了你的代码，就是这样：

$('[class*="altimage"]').click(function() {
  var elem = $(this);
  $("#main1").fadeOut(400, function() {
    $("#main1").attr('src', elem.find("img").attr('src')).fadeIn(400);
  });
  return false;
});

Here is the JSFiddle demo

请注意，图片不同，因为它们是在演示中随机生成的。

Javascript attr随着淡入淡出问题而改变

3 个答案: