尝试用jQuery创建旋转木马效果

There are four characters of which only one is being shown when the page is loaded. There are two arrows. One on the left and one on the right. When clicked on left arrow, the character present will fadeout and the previous character is faded in. When clicked on right arrow, the character present will fadeout and the next character is faded in. I've figure out how to fadeOut the present character in the screen, but don't know how to fadeIn the next or previous character when clicked on the arrows.

有四个字符，其中只有一个在页面加载时显示。有两个箭头。一个在左边，一个在右边。当单击左箭头时，当前字符将淡出，之前的字符将淡出。当单击右箭头时，当前字符将淡出，下一个字符将淡出。我已经知道如何在屏幕上显示当前字符，但是当单击箭头时不知道如何在下一个或上一个字符中显示。

Here is the fiddle which I created to illustrate the problem: http://jsfiddle.net/9K7bf/32/

下面是我创建的用于说明问题的小提琴:http://jsfiddle.net/9K7bf/32/

And here is the code:

这里是代码:

The HTML:

HTML:

<section id="characters">
    <div id="one" class="character"></div>
    <div id="two" class="character"></div>
    <div id="three" class="character"></div>
    <div id="four" class="character"></div>
</section>

<div id="arrow-left"></div>
<div id="arrow-right"></div>

CSS:

#characters{
    width: 100%;
    height: 100px;
}
#one{
    height: 50px;
    width: 50px;
    display: block;
    background-color: green;
    margin: 100px auto;
}
#two{
    height: 50px;
    width: 50px;
    display: none;
    background-color: blue;
    margin: 100px auto;
}
#three{
    height: 50px;
    width: 50px;
    display: none;
    background-color: purple;
    margin: 100px auto;
}
#four{
    height: 50px;
    width: 50px;
    display: none;
    background-color: black;
    margin: 100px auto;
}
#arrow-left{
    height: 25px;
    width: 25px;
    display: block;
    background-color: black;
    float: left;
}
#arrow-right{
    height: 25px;
    width: 25px;
    display: block;
    background-color: black;
    float: right;
}

jQuery:

$(document).ready(function(){
  $("#arrow-right").on('click', function(){
    $(".character").fadeOut().this();
  });  
    $("#arrow-left").on('click', function(){
    $(".character").fadeOut().this();
  });
});

4 个解决方案

#1

You can achieve the effect by doing the below. Effectively we have to find out what is the current item using a counter and then keep traversing through it.

你可以通过下面的操作来达到这个效果。实际上，我们必须使用计数器找出当前项目是什么，然后继续遍历它。

As an additional point, you can also avoid repetitions in the arrow boxes by assigning it a class='arrow' and providing all common properties under it.

另外，您还可以为它分配一个class='arrow'并在它下面提供所有公共属性，从而避免在箭头框中出现重复。

$(document).ready(function() {
  var i = 0; // Counter variable to keep track of the current item
  $("#arrow-right").on('click', function() {
    $(".character").eq(i).fadeOut('fast'); // Quickly fade out the current element
    i = i < 3 ? i + 1 : 0; // Increment counter till it reaches 3 (because element index is from 0 to 3). If it reaches 3 then we reset to 0 to loop back again.
    $(".character").eq(i).fadeIn('slow'); // Slowly fade in the next element. Note i here is the next element because we have already incremented the counter.
  });
  $("#arrow-left").on('click', function() {
    $(".character").eq(i).fadeOut('fast');
    i = i > 0 ? i - 1 : 3; // Same as for the right click except here the logic is reverse as we have to go back.
    $(".character").eq(i).fadeIn('slow');
  });
});

#characters {
  width: 100%;
  height: 100px;
  position: relative; /* Need because the characters would be absolutely positioned relative to their parent box */
}
.character { /* Created this class to put in all common properties to avoid repetition */
  height: 50px;
  width: 50px;
  position: absolute; /* This is required because all elements have to be positioned one on top of another */
  left: 50%; /* Required for positioning the boxes */
  top: 50%;  /* Required for positioning the boxes */
}
#one {
  display: block;
  background-color: green;
}
#two {
  display: none;
  background-color: blue;
}
#three {
  display: none;
  background-color: purple;
}
#four {
  display: none;
  background-color: black;
}
.arrow { /* Common class for common properties */
  height: 25px;
  width: 25px;
  display: block;
  background-color: black;
}
#arrow-left {
  float: left;
}
#arrow-right {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section id="characters">
  <div id="one" class="character"></div>
  <div id="two" class="character"></div>
  <div id="three" class="character"></div>
  <div id="four" class="character"></div>
</section>
<div id="arrow-left" class='arrow'></div> <!-- Note the addition of class -->
<div id="arrow-right" class='arrow'></div>

4 个解决方案

#1

更多相关文章

随机推荐