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

这是我为说明问题而创建的 fiddle :http://jsfiddle.net/9K7bf/32/

这是代码:

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();
  });
});

最佳答案

您可以通过执行以下操作来实现效果。实际上,我们必须使用计数器找出当前元素是什么,然后继续遍历它。

作为额外的一点,您还可以通过为其分配一个 class='arrow' 并在其下提供所有公共(public)属性来避免箭头框中的重复。

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


Fiddle Demo

关于javascript - 尝试使用 jQuery 创建轮播效果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24736591/

10-12 12:34
查看更多