尝试使用 jQuery 创建轮播效果

Question

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

这是我为说明问题而创建的小提琴：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();
  });
});

Answer 1

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

另外一点，您还可以通过为其分配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>

Fiddle Demo

Answer 2

我制作了您的 jsfiddle 的更新版本。我补充说，一件事是一个计数器，指示当前处于活动状态的内容（请参阅以下代码中的 activeItem）。

这是为了向您展示一个新的方向，而不是为您编写所有代码。接下来您可能想要解决的问题是：

• 有很多重复，这可能会更优雅。
• 它不检测环绕（小于零，大于三（记住：javascript 从零开始计数））
• 您无法在具有所有 ID 的页面中重复使用此多次。
• 淡入项目会跳来跳去，因为它们是display:block（CSS 术语）。这意味着，只要它们是可见的，它们就会在页面上保留它们的位置并取代其他东西。这可以通过 CSS 中的position: absolute 或position: fixed 来解决，具体取决于您周围的代码。

这里是：

$(document).ready(function(){
    // store what's current
    var activeItem = 0;

    $("#arrow-right").on('click', function(){
        $(".character").eq(activeItem).fadeOut();
        activeItem++;
        $(".character").eq(activeItem).fadeIn();
    });  

    $("#arrow-left").on('click', function(){
        $(".character").eq(activeItem).fadeOut();
        activeItem--;
        $(".character").eq(activeItem).fadeIn();
    });
});

newer version the jsfiddle

Answer 3

使用 .next() 和 .prev()。 注意：这仅在您不想单击最后一个返回开始时才有效。

$(document).ready(function(){

$("#arrow-right").on('click', function(){
    var next = $(".character:visible").next().attr("id");
    $(".character").fadeOut();
    $("#"+next).fadeIn();
});  
$("#arrow-left").on('click', function(){
    var prev = $(".character:visible").prev().attr("id");
    $(".character").fadeOut();
    $("#"+prev).fadeIn();
});
});

编辑：在最后一个按钮上单击下一步会破坏它，所以我添加了 if 语句。如果是最后一个按钮，您可以使用 else 更改按钮的 css。

$(document).ready(function(){

    $("#arrow-right").on('click', function(){
        var next = $(".character:visible").next().attr("id");
        if(next){
            $(".character").fadeOut();
            $("#"+next).fadeIn();
        }
    });  
    $("#arrow-left").on('click', function(){
        var prev = $(".character:visible").prev().attr("id");
        if(prev){
            $(".character").fadeOut();
           $("#"+prev).fadeIn();
        }
    });
});

Answer 4

您的 javascript 完全按照您的要求执行。您单击箭头，角色就会淡出。您在脚本中没有分配任何变量来定义其他字符。您只需在 css 中引用它们即可。

有了这么多免费的 jquery 滑块，为什么不直接使用像 Nivo 这样的插件呢？或谷歌“如何从头开始构建 jquery 滑块”。那里有很多教程。