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'并在其下提供所有常用属性来避免重复。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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这样的插件？或谷歌＆＃34;如何从头开始构建一个jquery滑块＆＃34;。那里有很多教程。

尝试使用jQuery创建轮播效果

4 个答案: