这是一个脚本,当单击prev
和next
按钮时,它充当简单的轮播方式淡入和淡出一些图像。
我使用jQuery fadeIn()
和fadeOut()
方法成功实现了淡入和淡出。
var speed = 100;
$('.prev').click(function(event){
event.preventDefault();
var current = $(this).parent().next('ul.images').children(':visible'),
lastSib = $(this).parent().next('ul.images').children(':last'),
prevSib = current.prev();
prevSib = prevSib.index() == -1 ? lastSib : prevSib;
current.fadeOut(speed,function(){
prevSib.fadeIn(speed);
});
});
我决定尝试通过css通过
toggleClass()
方法切换类来使用淡入淡出效果来淡化每个图像的另一种解决方案。这是我的问题所在...现在唯一消失的图像是第一张图像。我无法再访问任何其他图像。我推测我可能需要遍历每张图片,并以不同的方式来解决这个问题。
这是codepen的链接
$(document).ready(function(){
var speed = 100;
$('.prev').click(function(event){
event.preventDefault();
var current = $(this).parent().next('ul.images').children(':visible'),
lastSib = $(this).parent().next('ul.images').children(':last'),
prevSib = current.prev();
prevSib = prevSib.index() == -1 ? lastSib : prevSib;
// fading out fading in
current.toggleClass('out');
prevSib.toggleClass('in');
});
$('.next').click(function(event){
event.preventDefault();
var current = $(this).parent().next('ul.images').children(':visible'),
firstSib = $(this).parent().next('ul.images').children(':first'),
nextSib = current.next();
nextSib = nextSib.index() == -1 ? firstSib : nextSib;
current.toggleClass('out');
nextSib.toggleClass('in');
});
$('.images li').click(function(event){
event.preventDefault();
var firstImg = $(this).parent().children(':first'),
nextImg = $(this).next();
nextImg = nextImg.index() == -1 ? firstImg : nextImg;
$(this).toggleClass('out');
nextImg.toggleClass('in');
});
});
最佳答案
我对您的CSS和JQuery代码进行了一些更改。使用这些更新的代码,它将帮助您满足要求。
CSS代码
.images li{
list-style:none;
display:none;
}
.images li:first-child{
display: block;
}
li{
transition:opacity 0.4s;
opacity:1;
}
.out{
transition:opacity 0.2s;
opacity:0;
display:none !important;
}
.in{
transition:opacity 0.4s;
opacity:1;
display:list-item !important;
}
下一个和上一个Click事件的JQuery代码
$('.prev').click(function(event){
event.preventDefault();
var current = $(this).parent().next('ul.images').children(':visible'),
lastSib = $(this).parent().next('ul.images').children(':last'),
prevSib = current.prev();
// true previous
prevSib = prevSib.index() == -1 ? lastSib : prevSib;
current.removeAttr('class');
current.toggleClass('out');
prevSib.toggleClass('in');
});
$('.next').click(function(event){
event.preventDefault();
var current = $(this).parent().next('ul.images').children(':visible'),
firstSib = $(this).parent().next('ul.images').children(':first'),
nextSib = current.next();
// true next
nextSib = nextSib.index() == -1 ? firstSib : nextSib;
current.removeAttr('class');
current.toggleClass('out');
nextSib.toggleClass('in');
});
关于javascript - 使用toggleClass淡入淡出图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34543050/