Question

我正在尝试创建一个脚本来加载图片（1 - 5），当它加载时，它会改变当前图像的来源。在加载图像时可以看到加载微调器。但是脚本尚未准备就绪，我需要一些帮助来完成它。感谢帮助和指导！

我不确定如何处理URL并让新图像出现？使用jQuery .html(<img src.....？而且我不确定如何更改当前图像的src。也许我在错误的轨道上，如果有更好的方法来解决这个问题，我会对如何改变代码提出一些建议。

脚本：

$(document).ready(function(){

var res = {
loader: $('<div />', {class: 'loader'}),
container: $('.galleryContainer')
}

var img = $("#mainImage");

$("#menu ul li a").click(function() {

var btnNum = $("a").index(this);
var imgFile = "images/bella-sky-hotel-" + btnNum + ".jpg";

$.ajax({
    url: ??,
    beforeSend: function() {
        res.container.append(res.loader);
    },
    success: function(data) {
        // Change src of current image
        mainImage.attr({src: $(this) ????
        // Remove loader
        res.container.find(res.loader).remove();
    }
});
});
});

HTML：

<body>
<div class="galleryContainer">
<img src="images/bella-sky-hotel-1.jpg" id="mainImage" />
</div>

<div id="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>

Answer 1

   $(document).ready(function(){

 var res = {
loader: $('<div />', {class: 'loader'}),
container: $('.galleryContainer')
}

var img = $("#mainImage");

$("#menu ul li a").click(function() {

var btnNum = $("a").index(this)+1;//because 0 based
var imgFile = "images/bella-sky-hotel-" + btnNum + ".jpg";

    res.container.append(res.loader);// Change src of current image
    mainImage.attr({src: imgFile})
    // Remove loader
    res.container.find(res.loader).remove();

 });
 });

几乎完成了使用Ajax加载图像的脚本

1 个答案: