0

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

    /*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'];

提前致谢。

4

1 回答 1

1

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

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

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
}

那应该可以正常工作！

于 2013-06-19T14:30:25.197 回答