Question

我使用以下内容在我的网站上制作了一个照片库：

    /*Begin Photo Gallery Code*/
    var images = ['g1.jpg', 'g2.jpg', 'g3.jpg', 'g4.jpg'];

    function loadImage(src) {           
        $('#pic').fadeOut('slow', function() {
        $(this).html('<img src="' + src + '" />').fadeIn('slow');       

        });
    }

    function goNext() {
        var next = $('#gallery>img.current').next();            
        if(next.length == 0)
            next = $('#gallery>img:first');

        $('#gallery>img').removeClass('current');           
        next.addClass('current');
        loadImage(next.attr('src'));
    }

    $(function() {
        for(var i = 0; i < images.length; i++) {
            $('#gallery').append('<img src="images/gallery/' + images[i] + '" />');             

        }


        $('#gallery>img').click(function() {
            $('#gallery>img').removeClass('current');

            loadImage($(this).attr('src'));
            $(this).addClass('current');
        });

        loadImage('images/gallery/' + images[0]);
        $('#gallery>img:first').addClass('current');

        setInterval(goNext, 4000);
    });

它从一组四张照片中一次加载一张照片。此外，我有四个html文件，每个文件都与其中一个图片相关。我想使用JavaScript / JQuery / AJAX加载相关的html文件的内容以及显示的图片。有谁知道我该怎么做？

我应该将ajax文件（4个html文件）放入JavaScript数组中吗？

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];

提前致谢。

Answer 1

除非HTML文件在显示期间以某种方式改变，否则应该通过隐藏div s中的服务器端代码输出它们（这是正确的方法）或使用AJAX将它们保存在变量中或创建隐藏的div s。

首先你需要两个这样的数组：

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];//File Names
var divPages=['div1','div2','div3','div4'];//Div ids in order

对于AJAX部分，你应该使用类似的东西：

var getHtml = function(filename,divid){
    $.post('html/'+filename, function(data) {
    //The first argument is your file location
    //Second one is the callback, data is the string retrieved                               
        $('#'+divid).html(data);
    });
}

$.each(ajaxPages,function(index,value){
    getHtml(value,divPages[index]);
});

应该这样做......请告诉我你是否需要进一步解释。

编辑：

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];
var divId="yourdivid";
var textArray=new Array();
var currentImg=0;

var getHtml = function(filename){
    $.post('html/'+filename, function(data) {                             
       textArray.push(data);//Save data inside the array textArray
    });
}

$.each(ajaxPages,function(index,value){
    getHtml(value,divPages[index]);
});

然后你的goNext（）方法：

function goNext() {
    var next = $('#gallery>img.current').next();            
    if(next.length == 0){
        next = $('#gallery>img:first');
        currentImg=0;
    }else{
        currentImg++;
    }

    $('#gallery>img').removeClass('current');           
    next.addClass('current');
    loadImage(next.attr('src'));

     $('#'+divId).html(textArray[currentImg]);//Adds text to div based on current picture
}

这应该可以正常工作！

使用AJAX加载文本和图片

1 个答案: