我在div中有五个图像，它们看起来像这样[1] [2] [3] [4] [5]。 我想制作一个javascript，将它们自动转换为[2] [3] [4] [5] [1]然后[3] [4] [5] [1] [2]等等。 现在我设法只进行第一次图像更改。是否可以使用我拥有的脚本更改所有这些内容？ 先感谢您。 （我不知道jquery，我是javascript的初学者。）
var i = 1;
var x = ["img/facebook.png", "img/linkedin.png", "img/mail.png", "img/twiter.png", "img/skype.png"];
var y = ["1", "2", "3", "4", "5"];
function slide(num) {
i = i + num;
if(i < 0) i = x.length - 1;
if (i > x.length - 1) i = 0
document.getElementById('image01').src = x[i];
document.getElementById('text01').innerHTML = i;
}
function autorun(){setInterval("slide(1)", 3000);}body{margin: 0; padding: 0; color:#fdbf7d; font-family: courier new;}
.container{margin-left:auto; margin-right:auto; width:940px; padding:10px; background-color: yellow;}
#photo_gallery_container{background-color: brown;}
#photo_gallery{}<!doctype html>
<html lang="en">
<head>
<title>Gallery</title>
<meta http-equiv="content" content="text/html"; charset=UTF-8>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body onload="autorun()">
<div class="container">
<div id="photo_gallery_container">
<div id="photo_gallery">
<center>
<img id="image01" src="img/facebook.png" width="100px" height="100px">
<img id="image02" src="img/linkedin.png" width="100px" height="100px">
<img id="image03" src="img/mail.png" width="100px" height="100px">
<img id="image04" src="img/twiter.png" width="100px" height="100px">
<img id="image05" src="img/skype.png" width="100px" height="100px">
<span id="text01">1</span>
<span id="text02">2</span>
<span id="text03">3</span>
<span id="text04">4</span>
<span id="text05">5</span>
</center>
</div>
<script type="text/javascript" src="myscript.js"></script>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
你可以通过克隆图像并在最后一张图像之后插入它来实现：
var thisImage = $('#image01').clone(); //clone image
$('#image01').remove(); //remove original image
var lastImage = $('center img').eq(x.length-1); //get last image
thisImage.insertAfter(lastImage); //insert clone after last image