javascript - On click on the arrow the flags animated shifted one position to the left or right -

javascript - On click on the arrow the flags animated shifted one position to the left or right -

i'm new in js jquery. need help. have next task. there 6 flags on site left arrow on left , right arrow on right. when click on arrow flags animated shifted 1 position left or right. moving flags left right leaves re-create of leftmost flag , vice versa.

here's code:

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $(".arrow.left").click(function() { var position1 = $("#it").position(); $("#en").animate(position1); }); }); class="snippet-code-css lang-css prettyprint-override">.slider { position: absolute; top: 135px; left: 150px; } .slider > div { display: inline-block; } .slides { width: 550px; height: 53px; position: relative; font-size: 70%; } .arrow { width: 16px; height: 15px; background: url(pictures/arrowssprite.png) no-repeat; } .arrow.left { background-position: -16px 0; } .left:hover { background-position: 0 0; } .arrow.right { background-position: -32px 0; } .right:hover { background-position: -48px 0 } .slides > div span { min-width: 50px; position: absolute; display: inline-block; top: 25px; left: 15px; text-align: center; } #de, #es, #it, #en, #fr, #nl { position: absolute; color: #0094d9; } #de { top: 10px; } #es { top: 2px; left: 90px; } #it { left: 180px; } #en { left: 280px; } #fr { top: 2px; left: 373px; } #nl { top: 10px; left: 463px; } class="snippet-code-html lang-html prettyprint-override"><div class="slider"> <div class="arrow left"></div> <div class="slides"> <div id="de"> <a href=""> <img src="pictures/flags/germany.png" alt="Немецкий"><span>Немецкий</span> </a> </div> <div id="es"> <a href=""> <img src="pictures/flags/spain.png" alt="Испанский"><span>Испанский</span> </a> </div> <div id="it"> <a href=""> <img src="pictures/flags/italy.png" alt="Итальянский"><span>Итальянский</span> </a> </div> <div id="en"> <a href=""> <img src="pictures/flags/uk.png" alt="Английский"><span>Английский</span> </a> </div> <div id="fr"> <a href=""> <img src="pictures/flags/france.png" alt="Французский"><span>Французский</span> </a> </div> <div id="nl"> <a href=""> <img src="pictures/flags/netherlans.png" alt="Голландский"><span>Голландский</span> </a> </div> </div> <div class="arrow right"></div> </div>

i understand, 1 changing position of 1 flag (for illustration "#en" position of "#it") can next: `

but can't understand, how position of "#en" can alter after next click position of "#es"? position of "#de" , on.

is want? (press "run code snippet" @ bottom)

class="snippet-code-js lang-js prettyprint-override">var countryhtml = [ '<a href=""><img src="pictures/flags/germany.png" alt="Немецкий"><span>1Немецкий</span></a>', '<a href=""><img src="pictures/flags/spain.png" alt="Испанский"><span>2Испанский</span></a>', '<a href=""><img src="pictures/flags/italy.png" alt="Итальянский"><span>3Итальянский</span></a>', '<a href=""><img src="pictures/flags/uk.png" alt="Английский"><span>4Английский</span></a>', '<a href=""><img src="pictures/flags/france.png" alt="Французский"><span>5Французский</span></a>', '<a href=""><img src="pictures/flags/netherlans.png" alt="Голландский"><span>6Голландский</span></a>' ]; var offset = -1; var redrawcountries = function (dir) { //offset current country @ #pos0 offset += dir; //moves #pos(i) opposite direction of dir (if dir 1 or "left", //it moved right , animated it's original position. //this function set right country div var moveelem = function (i) { //get country (i+offset) , if lower 0, create zero, if //higher 5, create 5. //as offset indicates country supposed @ #pos0 @ end //of animation , passing in requests animate #pos(i), //country supposed end in #pos(i) (i+offset). @ #pos0 //countryhtml[offset] supposed used. @ #pos1, countryhtml[1+offset] //and on. var countryindex = math.min(math.max(i+offset, 0), countryhtml.length-1); //get jquery object of current element var currelem = $("#pos"+i); //finishes animation, of import part finish, acts if //animation completed, doesn't stop halfway, jumps end position currelem.finish(); //set right html current element currelem.html(countryhtml[countryindex]); //get position of element opposite current direction (so left element if //the right arrow pressed , vice versa) var frompos = $("#pos"+(i+dir)).position(); //get current position move element var topos = currelem.position(); //set current element's position fromposition currelem.css({ left: frompos.left, top: frompos.top }); //animate toposition currelem.animate(topos); }; //if it's animated left if (dir === 1) { //iterate left right, element current 1 relies on (the //element right of current one) has not been moved yet (var = 0;i < 5;i++) { moveelem(i); } //set element not iterated through $("#pos5").html(countryhtml[math.min(math.max(5+offset, 0), countryhtml.length-1)]); } else if (dir === -1) { //animated right //iterate other way same reason (var = 5;i > 0;i--) { moveelem(i); } //set element not iterated through $("#pos0").html(countryhtml[math.min(math.max(offset, 0), countryhtml.length-1)]); } }; $(".arrow.left").click(function() { redrawcountries(1); }); $(".arrow.right").click(function() { redrawcountries(-1); }); $(document).ready(function() { redrawcountries(1); }); class="snippet-code-css lang-css prettyprint-override">.slider { position: absolute; top: 135px; left: 150px; } .slider > div { display:inline-block; } .slides { width:550px; height:53px; position:relative; font-size:70%; } .arrow { width: 16px; height: 15px; background: url(pictures/arrowssprite.png) no-repeat; border: 1px solid black; } .arrow.left { background-position: -16px 0; } .left:hover { background-position: 0 0; } .arrow.right { background-position: -32px 0; } .right:hover { background-position: -48px 0 } .slides > div span { min-width:50px; position:absolute; display:inline-block; top:25px; left:15px; text-align:center; } .slides > div { border: 1px solid black; } #pos0, #pos1, #pos2, #pos3, #pos4, #pos5 { position: absolute; color: #0094d9; } #pos0 { top: 10px; } #pos1 { top: 2px; left: 90px; } #pos2 { left: 180px; } #pos3 { left: 280px; } #pos4 { top: 2px; left: 373px; } #pos5 { top: 10px; left: 463px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slider"> <div class="arrow left"></div> <div class="slides"> <div id="pos0"></div> <div id="pos1"></div> <div id="pos2"></div> <div id="pos3"></div> <div id="pos4"></div> <div id="pos5"></div> </div> <div class="arrow right"></div> </div>

javascript jquery html css