我有以下代码用于围绕圆形方式移动4张图片,但它只能旋转其中两张
<html>
<head>
<title>Moving div</title>
</head>
<body>
<div id = "listDiv">
<img id="img1" width="200" height="200" /><br />
<span id="quote1" ></span>
</div>
<div id="listDiv1">
<img id="img2" width="200" height="200"/><br/>
<span id="quote2 "></span>
</div>
<div id="listDiv2">
<img id="img3" width="200" height="200"/><br/>
<span id="quote3 "></span>
</div>
<div id="listDiv3">
<img id="img4" width="200" height="200"/><br/>
<span id="quote4 "></span>
</div>
<script>
var listDiv = document.getElementById("listDiv");
var lisDiv1=document.getElementById("listDiv1");
var listDiv2=document.getElementById("listDiv2");
var listDiv3=document.getElementById("listDiv3");
var quote1 = document.getElementById("quote1");
var quote2 = document.getElementById("quote2");
var quote3 = document.getElementById("quote3");
var quote4 = document.getElementById("quote4");
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var img4 = document.getElementById("img4");
listDiv.style.backgroundColor = "lightBlue";
listDiv.style.position = "absolute";
listDiv1.style.position = "absolute";
listDiv2.style.position = "absolute";
listDiv3.style.position = "absolute";
var intervalHandle = setInterval(changeSecond, 10);
var counter=0;
var pics = [
"http://www.dyslexiaassociation.ca/gallery/famous/AlbertEinstein.jpg",
"http://www.historyking.com/images/Black-Famous-People.jpg",
"http://www.historyking.com/images/Famous-People-From-Washington.jpg",
"http://baobongdaso24h.com/wp-content/uploads/2011/10/Steve-Jobs-chet1.jpg",
"http://www.stgabss.net/SpecialNeeds/images/stories/famous/john_lennon_portrait.jpg",
"http://imgs.inkfrog.com/pix/just4kids2/President-George-W-Bush_mprtp.jpg",
"http://www.smilorama.com/img/people/rare_photos_of_famous_people/rare_photos_of_famous_people04.jpg"
];
var quotes = [
'E=mc<sup style="font-size:xx-small">2</sup>',
"I have a dream",
"Be nice to nerds.<br/>Chances are you'll<br/>end up working for one",
"You are holding it wrong",
"Imagine all the people",
"I know the human being<br/>and fish can coexist peacefully.",
"The name is Bond, James Bond"
];
function changeSecond(){
if (counter++%2==0){
if (counter>700){
counter=0;
}
//change the text every 101 counts
if (counter%101==0){
var randomIndex = Math.floor(Math.random()*pics.length);
img1.setAttribute("src", pics[randomIndex]);
quote1.innerHTML=quotes[randomIndex];
img2.setAttribute("src", pics[randomIndex]);
quote2.innerHTML=quotes[randomIndex];
img3.setAttribute("src", pics[randomIndex]);
quote3.innerHTML=quotes[randomIndex];
img4.setAttribute("src", pics[randomIndex]);
quote4.innerHTML=quotes[randomIndex];
}
//move the element to the left:
listDiv.style.left =400+200*Math.cos(counter/90)+"px";
//move the element down:
listDiv.style.top =400+200*Math.sin(counter/90)+"px";
listDiv1.style.left =400 + 300* Math.cos(counter/90)+"px";
listDiv1.style.top =400 + 200 * Math.cos(counter/90)+"px";
listDiv2.style.left =400 + 200 * Math.cos(counter/90)+"px";
listDiv2.style.top =400 + 200 * Math.cos(counter/90)+"px";
listDiv3.style.left =400 + 200 * Math.cos(counter/90)+"px";
listDiv3.style.top =400 + 2width="200" height="200"00 * Math.cos(counter/90)+"px";
}
}
</script>
</body>
</html>
我能做什么?
答案 0 :(得分:1)
有一些简单的错误会阻止所有4个错误显示。
其中一个是你在span'中有一些空格用于引号,这导致了错误:
<span id="quote2 "></span>
<span id="quote3 "></span>
<span id="quote4 "></span>
删除空格是必要的,它清除了生成的错误。然后在这里有一个错字或复制过去的错误:
listDiv3.style.top =400 + 2width="200" height="200"00 * Math.cos(counter/90)+"px";
宽度=和高度=位可能是发布等时的粘贴错误,但需要将其删除。
所以当时很快就出现了3个,所以看起来你只有4个,但有两个被他们的朋友所覆盖。
尝试更改每个的起点,就像这样(我在左边有200,300,400,500作为计算的一部分):
listDiv.style.left =400+200*Math.cos(counter/90)+"px";
listDiv.style.top =400+200*Math.sin(counter/90)+"px";
listDiv1.style.left =400 + 300 * Math.cos(counter/90)+"px";
listDiv1.style.top =400 + 200 * Math.cos(counter/90)+"px";
listDiv2.style.left =400 + 400 * Math.cos(counter/90)+"px";
listDiv2.style.top =400 + 200 * Math.cos(counter/90)+"px";
listDiv3.style.left =400 + 500 * Math.cos(counter/90)+"px";
listDiv3.style.top =400 + 200 * Math.cos(counter/90)+"px";
这看起来并不是很漂亮,但它让它们被揭开了,你可以玩它并更好地安排它们。
希望有所帮助