我正在制作一张桌子的网站。每个单元应该有它自己的背景图像。我选择将这些图像放在一个数组中。我做了一个功能,创建一个与作为背景的照片和作为文本的照片。我的代码是在:显示阵列中的背景照片
var meme = [
'memes/0.jpg',
'memes/1.jpg',
'memes/2.jpg',
'memes/3.jpg',
'memes/4.jpg',
'memes/5.jpg',
'memes/6.jpg',
'memes/7.jpg',
'memes/8.jpg',
'memes/9.jpg',
'memes/10.jpg',
'memes/11.jpg'];
var author = [
'avelan',
'avelan',
'tjespe',
'tjespe',
'avelan',
'avelan',
'avelan',
'jakoo',
'avelan',
'avelan',
'email',
'email'];
function memeDisplay (i) {
for (i=0; i<meme.length; i++) {
return ("<div class='meme' style='background-image:url(" + meme[i] + ")'>av " + author[i] + "</div>");
}
}
body {
margin:0px;
background:#FFFFFF;
background-image: url("jpg/dolan-wallpaper.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:100px;
background:#303030;
border:1px solid #CCC;
width:960px;
margin: auto;
color: #FFFFFF;
font-size: 300%;
font-family: monaco;
vertical-align: central;
text-align:center;
}
.subheader {
height:100px;
background:#303030;
border:1px solid #CCC;
width:960px;
margin: auto;
color: #FFFFFF;
font-size: 100%;
font-family:monaco;
vertical-align: central;
text-align:center;
}
.content {
width:960px;
background: #303030;
border: 1px solid #CCC;
margin: 70px auto;
}
.meme {
width:300px;
height:300px;
background-position:center;
margin:auto;
font-family:monaco;
vertical-align: text-bottom;
text-align: right;
color: white;
}
a {
color:white
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javaScript" src="js/script.js"></script>
<meta charset="UTF-8">
</head>
<body style="background-image: url('jpg/dolan-wallpaper.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;">
<div class="header">
Olans bæste memes
</div><br><br><br>
<div class="subheader"><br>
Dette er vår offisielle nettside for memes. Her legger vi jevnlig ut asom memes til offentligheten. Vi lager omtrent alle selv. På hvert meme står det hvem som er forfatteren. Under ser du forhåndsvisninger av alle memesene vi har lagt ut. Bare trykk på de for å se hele bildet.
</div>
<div class="content">
<table style="width:100%">
<tr></tr>
<tr>
<td><a href="meme[0]"><script>memeDisplay(0)</script></a></td>
<td><a href="meme[1]"><script>memeDisplay(1)</script></a></td>
<td><a href="meme[2]"><script>memeDisplay(2)</script></a></td>
</tr>
<tr>
<td><a href="meme[3]"><script>memeDisplay(3)</script></a></td>
<td><a href="meme[4]"><script>memeDisplay(4)</script></a></td>
<td><a href="meme[5]"><script>memeDisplay(5)</script></a></td>
</tr>
<tr>
<td><a href="meme[6]"><script>memeDisplay(6)</script></a>
<td><a href="meme[7]"><script>memeDisplay(7)</script></a></td>
<td><a href="meme[8]"><script>memeDisplay(8)</script></a></td>
</tr>
<tr>
<td><a href="meme[9]"><script>memeDisplay(9)</script></a></td>
<td><a href="meme[10]"><script>memeDisplay(10)</script></a></td>
<td><a href="meme[11]"><script>memeDisplay(11)</script></a></td>
</tr>
</table>
</div>
</body>
我的问题是,当我访问的网站没有在表中显示出来。 如果有人能帮我弄清楚有什么不对,我将非常感激。
有很多事情错在你的代码......这不是在所有的JS是如何工作的。 – blex
把它归结为最基本的问题,并从那里采取。去掉所有不必要的html,css,js和数组元素,真正的问题会让你盯着你。 – user3791372