Question

我试图淡入淡出图像，而不是立即改变它们（正如他们目前所做的那样）。

请参阅我的codepen以获取一个工作示例：http://codepen.io/jsegarra/pen/ExCrj 如果按数字，图像将会改变。

我有一个动态页面，当有人进入页面的项目部分时，有48个不同的项目需要查看。 codepen是其中一个项目可能是什么样子的一个例子。我知道内联onclick函数可能不是最好的方法，但我尝试过的每个jQuery函数（很多）都没有正常工作。

我希望有一个jQuery函数可以控制所有48个部分的图像更改，因为我有jQuery控制大部分页面。我最初以这种方式设置HTML，但是图像会立即改变，我需要它们淡入/淡出。

我尝试了很多东西，包括在内联函数中的某处添加.fadeIn（）/ Out（）。

然后我从li中取出了那些图像的src，并在包含的div中创建了新的div：

<div class="nextImage secondImage">
    <img src="document.getElementById('br_img').src = 'http://kerlabs.net/wp-content/uploads/2014/03/Scenic-Waterfall-HD-Wallpaper.jpg'" />
</div>

等。对于所有4并添加显示：无;对于那些在CSS中使用这个jQuery函数并添加了display：

的人

$(document).ready(function () {
$('.one').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.firstImage').fadeIn(500);
    });
});
$('.two').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.secondImage').fadeIn(500);
    });
});
$('.three').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.thirdImage').fadeIn(500);
    });
});
$('.four').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.fourthImage').fadeIn(500);
    });
});
});

那没有做任何事情，我尝试过的20种变种也没有。我基本上卡住了，需要灵感和帮助。我可能也会研究CSS3动画以使其工作，因为HTML工作，只需要很少的效果。谢谢你的帮助！

Answer 1

你去：http://codepen.io/anon/pen/ltosw

您只需要为li的每个id提供一个独特的click，并在$('#one').click(function(){ $('#br_img').fadeOut(300,function(){ $('#br_img').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cathedral_Group_panorama_from_Cathedral_Group_Scenic_Turnout2.JPG/800px-Cathedral_Group_panorama_from_Cathedral_Group_Scenic_Turnout2.JPG'); $('#br_img').fadeIn(300); }); });事件中执行此代码：

$('.imgNumerals li').click(function(){
    var that=this;
    $('#br_img').fadeOut(300,function(){        
      $('#br_img').attr('src',$(that).data('image'));
      $('#br_img').fadeIn(300);
    });
  });

仅供参考，您的第二张和第三张照片的链接似乎已被破坏！

<强>更新

这是将图像的链接存储到数据属性中的方法：http://codepen.io/anon/pen/niKzs

{{1}}

Answer 2

使用data-attribute HTML属性。您可以在其中存储图像链接。的 JSFIDDLE

<li class="swap" data-img="http://image-link.jpg">1</li> var object; $('.swap').click(function(){ object = $(this); $('#br_img').fadeOut(300, function(){ $('#br_img').attr("src",object.attr("data-img")).fadeIn(300); }); }); // this one jQuery function would set up the elements for all 48 of your // portfolio items (no need to duplicate it 48 times) as long as the image // URLs are stored in the data-img HTML attributes

Answer 3

哦，我的方式看起来比@JRulle长得多，但我还是会发帖，因为它不同于它。

我首先注意到的一件事是，通过更换img的src，可以注意到下载图像的延迟，这会影响淡入的外观，因为图像在加载之前淡入然后突然出现一旦加载。

我想到的另一件事是，有48个项目，必须添加所有这些点击监听器是一个正确的婊子，所以使用一个解决方案，只需要根据你想要显示的图像列表做所有事情。 / p>

(working codepen can be found here)

声明数组中的所有图像，如果您的页面是动态构建的，那么这可能是您需要构建的唯一内容。

var images =[
"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cathedral_Group_panorama_from_Cathedral_Group_Scenic_Turnout2.JPG/800px-Cathedral_Group_panorama_from_Cathedral_Group_Scenic_Turnout2.JPG",
    "http://kerlabs.net/wp-content/uploads/2014/03/Scenic-Waterfall-HD-Wallpaper.jpg",
    "http://kerlabs.net/wp-content/uploads/2014/03/Blue-Ocean-Scenic-HD-Wallpaper-.jpeg",
    "http://kerlabs.net/wp-content/uploads/2014/03/Beauty-Blue-scenic-wallpaper.jpeg"
];

//preload images courtesy of http://stackoverflow.com/a/476681/2737978
function preload(arrayOfImages) {
    $(arrayOfImages).each(function() {
        $('<img/>')[0].src = this;
    });
}
preload(images);

//下一部分只是向左/向右移动图像或转到特定图像的一些助手 //使用指针来了解当前的图像

var pointer = 0;


incrementPointer = function() {
    if (pointer == images.length - 1) {
        pointer = 0;
    } else {
        pointer++;
    }
}

deincrementPointer = function() {
    if (pointer == 0) {
        pointer = images.length - 1;
    } else {
        pointer--;
    }
}
deincrementImage = function() {
        deincrementPointer();
        changeImage(pointer);
    }

incrementImage = function() {
    incrementPointer();
    changeImage(pointer);
}

//change image is where the actually image is swapped over using the complete call back to
//change the image and fade in after the fade out has completed, because the images are
//preloaded flicker should not be noticed

changeImage = function(index) {
    $imgPlaceHolder.fadeOut("slow", function() {
        $imgPlaceHolder.attr("src", images[index])
        $imgPlaceHolder.fadeIn("slow");
    });

}



var $imgPlaceHolder = $("#br_img");


$(document).ready(function() {
    //first image is placed in straight away
    $imgPlaceHolder.attr("src", images[pointer]);


    //listener setup on the backbutton
    $("a.arrowBack").click(function(event) {
        event.preventDefault();
        deincrementImage();

    });

//the li's are dynamically added and listeners attached based on the number of images
//using the html of the li is a bit ugly but this could be added to a data attribute instead

var index = 0;
    images.forEach(function() {
        $("<li>", {
            html: index + 1
        }).on("click", function() {
            changeImage(parseInt($(this).html()) - 1);
        }).appendTo('.imgNumerals');
        index++;

    });
});

内联脚本以jQuery函数淡化动态页面上的图像

3 个答案: