javascript - 照片库 -javascript

标签 javascript jquery html css gallery

我在一个 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>&nbsp;&nbsp;&nbsp;
			<span id="text02">2</span>&nbsp;&nbsp;&nbsp;
			<span id="text03">3</span>&nbsp;&nbsp;&nbsp;
			<span id="text04">4</span>&nbsp;&nbsp;&nbsp;
			<span id="text05">5</span>&nbsp;&nbsp;&nbsp;
		 </center>	
		 </div>
		 <script type="text/javascript" src="myscript.js"></script>
	  </div>
   </div>
</body>
</html>

最佳答案

您可以通过克隆图像并将其插入到最后一个图像之后来实现:

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

关于javascript - 照片库 -javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39095599/

相关文章:

php - 使用 AJAX、PHP 和 JSON 从 MySQL 数据库获取数据项

javascript - 延迟 iFrame 加载其 src 直到调用函数?

javascript - iframe 内的 $(body)

javascript - PIXI.js AnimatedSprite 在第一次播放时滞后

javascript - Jquery循环遍历表找到最高值

html - 在 HTML 输入中调整文本光标的垂直位置(相对于文本本身)

javascript - JavaScript中如何判断文件是否被选中?

javascript - 在 html 选项卡中管理长文本 block

javascript - 数组中对象的迭代并更改对象中的值

javascript - 修改函数时odoo js错误,属性 'include'未定义