有四个字符,加载页面时只显示一个字符。
有两个箭头。一个在左边,一个在右边。
单击左箭头时,当前字符淡出,前一个字符淡入。单击右箭头时,当前字符淡出,下一个字符淡入。
我已经弄清楚如何淡出屏幕中的当前字符,但不知道如何在单击箭头时淡入下一个或上一个字符。
这是我为说明问题而创建的 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/