フォトギャラリー - javascript

私はdivに5つの画像を持っていますが、これは[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; 
 
\t if(i < 0) i = x.length - 1; 
 
\t if (i > x.length - 1) i = 0 \t 
 
    document.getElementById('image01').src = x[i]; 
 
\t 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"> 
 
\t  <div id="photo_gallery"> 
 
\t \t <center> 
 
\t \t  <img id="image01" src="img/facebook.png" width="100px" height="100px"> 
 
\t \t  <img id="image02" src="img/linkedin.png" width="100px" height="100px"> 
 
\t \t  <img id="image03" src="img/mail.png" width="100px" height="100px"> 
 
\t \t  <img id="image04" src="img/twiter.png" width="100px" height="100px"> 
 
\t \t  <img id="image05" src="img/skype.png" width="100px" height="100px"> 
 
\t \t \t <span id="text01">1</span>&nbsp;&nbsp;&nbsp; 
 
\t \t \t <span id="text02">2</span>&nbsp;&nbsp;&nbsp; 
 
\t \t \t <span id="text03">3</span>&nbsp;&nbsp;&nbsp; 
 
\t \t \t <span id="text04">4</span>&nbsp;&nbsp;&nbsp; 
 
\t \t \t <span id="text05">5</span>&nbsp;&nbsp;&nbsp; 
 
\t \t </center> \t 
 
\t \t </div> 
 
\t \t <script type="text/javascript" src="myscript.js"></script> 
 
\t </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-08-23 Popescu Oana

あなたは、子とaddChildを削除するか、またはjQueryをタグ付きとして使用できます – mplungjan

あなたがイメージのクローンを作成し、最後の画像の後にそれを挿入することによって、それを行うことができます：

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

出典

2016-08-23 08:29:16

フォトギャラリー - javascript

答えて

関連する問題