Question

我用div框中的HTML绘制了一个图像。我不是很流利的JavaScript，我试图像建筑图像一样显示一个div。什么是一个很好的JavaScript方程式，一次显示每个div一个像闪光电影，而不重写我的代码？我可以访问Dreamweaver，如果这会让事情变得更容易。这是我的一小部分形象：

<html>
<head>

<style type="text/css">

</head>

#apDiv6101 {
position:absolute;
width:131px;
height:81px;
z-index:35;
left:119px;
top:785px;
background-color:#80d010;}

#apDiv6102 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:119px;
top:858px;
background-color:#80d010;}

#apDiv6104 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:241px;
top:858px;
background-color:#80d010;}

#apDiv6106 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:241px;
top:785px;
background-color:#80d010;}

#apDiv6108 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:119px;
top:785px;
background-color:#80d010;}

#apDiv6110 {
position:absolute;
width:121px; 
height:73px;
z-index:40;
left:124px;
top:789px;
background-color:#000000;}


</style>

<body bgcolor="#000000">

<div id="apDiv6110"></div>
<div id="apDiv6108"></div>
<div id="apDiv6106"></div>
<div id="apDiv6104"></div>
<div id="apDiv6102"></div>
<div id="apDiv6101"></div>

</body>
</html>

Answer 1

此页面隐藏所有div，然后逐步显示一个，直到显示文档中的所有div。

http://jsfiddle.net/fFtZc/2/

JS代码：

var current = 0, L, alldivs;

function displayOne() {
    if (current < L) {
        alldivs[current].style.display = '';
        current++;
        setTimeout(displayOne, 750);
    }
}

function init() {
    var i;
    alldivs = document.getElementsByTagName('div');
    for (i=0, L=alldivs.length; i<L; i++) {
        alldivs[i].style.display='none';
    }
    setTimeout(displayOne, 750);
}

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", init, false);
}
else {
    /* for other browsers */
    window.onload = init;
}

Answer 2

据我了解，您希望图像一个接一个地显示。并且您希望一次只显示一个图像（隐藏前一个图像）

代码就是。

（假设使用了Jquery）

var img_arr = ['appDiv6101','appDiv6102'....,'appDiv6110'];

var i =0;
function cycleImages(){
// hide all the divs
$('div#^appDiv').hide();
//now show the apppropiate div
i = i++ % 12;
$('div#'+img_arr[i-1]).show();
// wait for sometime and call again.
setTimeout(cycleImages,30);
}

JavaScript编码一次显示一个div

2 个答案: