单击箭头时，动画标记向左或向右移动一个位置

Question

我是JS的新手jQuery。我需要一些帮助。我有下一个任务。我的网站上有6个标志，左边的箭头和右边的右箭头。当您单击箭头标志时，动画向左或向右移动一个位置。通过向左移动标志向左留下最左边标志的副本，反之亦然。

以下是代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".arrow.left").click(function() {
    var position1 = $("#it").position();
    $("#en").animate(position1);
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我理解，对于一个国旗到另一个国家的一个更改位置（例如＆＃34; #en＆＃34;到＆＃34; #it＆＃34;的位置我接下来可以做：`

但我无法理解，＆＃34; #en＆＃34;的位置如何？可以在下次点击＆＃34; #es＆＃34;？的位置后进行更改然后到＆＃34; #de＆＃34;的位置等等。

Answer 1

这是你想要的吗？ （按＆＃34;运行代码片段＆＃34;在底部）

＆＃13;

＆＃13;

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 is current country at the #pos0
  offset += dir;
  
  //Moves #pos(i) to the opposite direction of dir (if dir is 1 or "left",
  //it will be moved to the right and then animated back to it's original position.
  //This function will also set the correct country to the div
  var moveElem = function (i) {
    //Get the country (i+offset) and if it is lower than 0, make it zero, if it is
    //higher than 5, make it 5.
    //As offset indicates the country that is supposed to be at #pos0 at the end
    //of the animation and passing in i requests that you animate #pos(i), the
    //country that is supposed to end up in #pos(i) is (i+offset). So at #pos0
    //countryHtml[offset] is supposed to be used. at #pos1, countryHtml[1+offset]
    //and so on.
    var countryIndex = Math.min(Math.max(i+offset, 0), countryHtml.length-1);
    
    //Get the jQuery object of the current element
    var currElem = $("#pos"+i);
    
    //Finishes animation, the important part about finish, is it acts as if the
    //animation completed, so it doesn't stop halfway, but jumps to the end position
    currElem.finish();
    
    //Set the correct html for the current element
    currElem.html(countryHtml[countryIndex]);
    
    //Get the position of the element opposite the current direction (so left element if
    //the right arrow is pressed and vice versa)
    var fromPos = $("#pos"+(i+dir)).position();
    
    //Get the current position to move the element to
    var toPos = currElem.position();
    
    //Set the current element's position to the fromPosition
    currElem.css({ left: fromPos.left, top:  fromPos.top });
    
    //Animate it to the toPosition
    currElem.animate(toPos);
  };
  
  //If it's animated to the left
  if (dir === 1) {
    
    //Iterate from left to right, so that the element the current one relies on (the
    //element to the right of the current one) has not been moved yet
    for (var i = 0;i < 5;i++) {
      moveElem(i);
    }
    
    //Set the element which was not iterated through
    $("#pos5").html(countryHtml[Math.min(Math.max(5+offset, 0), countryHtml.length-1)]);
    
  } else if (dir === -1) { //Animated to the right
    
    //Iterate the other way for the same reason
    for (var i = 5;i > 0;i--) {
      moveElem(i);
    }
    
    //Set the element which was 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);
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;