0

我正在显示一堆图像，我需要做的是淡出顶部的图像，然后将其移动到堆栈的底部并将其不透明度恢复到 1.0。除了更改包含图像的对象（div）上的 z-index 之外，一切工作正常。我已经绝对定位了 div，虽然我正在动态创建它，但不确定这是否会有所作为。这是我的代码[注意：淡入和淡出现在被注释以用于调试目的]：

// JavaScript Document

var Summary = {};

Summary.hasTemplate = true;
Summary.template = {

    summaryID : 'pageName',
    itemCount : 5,
    speed : 2000,
    pause : 2000,
    imgDirectoryPath : 'css/images/summaryImages/',
    imgPrefix : '26_01_010_###',
    imgExtension : '.png',
    imgCountStart : 1,
    imgCountEnd : 5,
    imgStep : 1,
    imgSize : {width : 400, height : 400},
    imgFiles : {},
    containerPos : {x : 0, y : 0}
}


function buildSummary() { 

var summaryCode = "<div id='summaryWrapper'>"; 

//check to see if the summary is running off a template or unique files
if (Summary.hasTemplate == true) { 

    //set a number to start our img count from (one less than the start number in the object)
    var imgNum = Summary.template.imgCountStart-1;

    //build an array of the img prefix components
    var imgPrefixComponents = Summary.template.imgPrefix.split("_");

    //check to see if there is more than one underscore, then build out the image prefix
    var imgPrefix = "";
    if (imgPrefixComponents.length < 2) { 
        imgPrefix = imgPrefixComponents[0] + "_";
    } else {
        for(var p=0; p<imgPrefixComponents.length; p++) {
            if (p != imgPrefixComponents.length-1) {  
                imgPrefix += imgPrefixComponents[p] + "_";
            }
        }
    }

    var imgExtension = Summary.template.imgExtension;

    //get the count of the leading zeroes (use length-1 in case the image name contains other underscores)
    var zeroCount = imgPrefixComponents[imgPrefixComponents.length-1].match(/#/g).length;

    //build out the image prefix
    for(z=0; z<zeroCount; z++) { 
        imgPrefix += "0"
    }

    //loop through the image count
    for (i=0; i<Summary.template.itemCount; i++) { 

        //increment the image number
        imgNum++;

        //start building the image wrapper
        var imgWrapperCode = "<div class'summaryImg' pageID='" + Summary.template.summaryID + "' thisImg='summaryImg_" + imgNum + "'  style='z-index:" + (100+imgNum) + "; position: absolute; top: 100; left: 100; width:" + Summary.template.imgSize.width +"; height: " + Summary.template.imgSize.width + ";'>"; 

        //get the img directory path
        var imgDirectoryPath = Summary.template.imgDirectoryPath;

        //build the imgFilePath
        var imgFilePath = imgDirectoryPath + imgPrefix + imgNum + imgExtension

        imgWrapperCode += "<img src='" + imgFilePath + "'></div>";

        summaryCode += imgWrapperCode;

        Summary.template.imgFiles[i] = imgFilePath;

    }

}

Summary.summaryCode = summaryCode;
}

function setUpSummaryFade() { 

//check to see if we are working with a template or not
if (Summary.hasTemplate == true) { 

    //get an array of the image divs, the summaryID let's us target a page so we're not ligthing them all up at once
    var imgDivs = $('div[pageID="' + Summary.template.summaryID + '"]');

    //build an array of z-indexes
    var zIndexes = new Array();
    for (i=0; i<imgDivs.length; i++) { 

        var thisImgDiv = imgDivs[i];
        var thisZIndex = $(thisImgDiv).css('z-index');
        zIndexes.push(thisZIndex);
    }

    i = imgDivs.length;
    setInterval(function() { 
        i--; 
        if (i > -1) { 
            fadeDivs(imgDivs[i], zIndexes, imgDivs); 
        } else { 
            i = imgDivs.length;
        }

    }, Summary.template.pause);
}
}

function fadeDivs(thisDiv, zIndexes, imgDivs)  {

//$(thisDiv).fadeOut('slow');

//change it's z-index
var maxZIndex = zIndexes[zIndexes.length-1];
var minZIndex = zIndexes[0];

for(z=0; z<imgDivs.length; z++) { 

    var thisDiv = imgDivs[z];
    var thisZIndex = $(thisDiv).css('z-index');

            //EDITS: Works on the first element, but not on the others
    console.log("Start z: " + $(thisDiv).css('z-index'));
    if (thisZIndex == maxZIndex) { 
        $(thisDiv).css('z-index', minZIndex);
    } else { 
        $(thisDiv).css('z-index', thisZIndex+1);
    }
    console.log("End z: " + $(thisDiv).css('z-index'));
}

//bring it back to life
//$(thisDiv).fadeIn('fast');

}

4

1 回答 1

1

这一行是错误的：

if (thisZIndex = maxZIndex) {

始终返回 true，您应该将其更改为

if (thisZIndex == maxZIndex) {
于 2012-08-24T13:32:18.393 回答