我在处理图像动画时遇到问题,似乎无法弄清楚。
<div id="img_loop">
<img src="img/img1.jpg" alt="image1" />
<img src="img/img2.jpg" alt="image2" class="hidden" />
<img src="img/img3.jpg" alt="image3" class="hidden" />
</div>
其中两个图像具有 hidden 类,设置了它们的 css display=none;
我有这三张图片,想通过在“隐藏”类中在它们之间切换来进行连续循环,以便它是三张图片的幻灯片,一次只有一张不隐藏。
我正在按照这些思路尝试一些东西
$(function(){
setInterval("updateImage()", 2500);
})
function updateImage() {
var $active = $('#img_loop img').not('hidden');
var $next = $active.next();
$active.fadeTo(1000, 1.0, function(){
$active.addClass('hidden');
$next.removeClass('hidden')
})
}
感谢所有的帮助:)
最佳答案
备注next()
不会进行循环查找,这意味着如果事件图像是最后一个 next() 将不会选择第一个图像。您需要进行检查并选择第一张图像(如果它位于末尾)。
if($next.length == 0){
$next = $('#img_loop img').first();
}
你的 fadeTo 将已经显示的图像的不透明度设置为 1,而我认为你的意思是将它设置为 0。你需要在显示时重置它,因为 fadeTo() 设置元素的样式属性,如果不重置,它将保留在0.
$next.removeClass('hidden').css("opacity","initial")
最后是 not()
方法使用了错误的选择器,not('hidden')
排除名为 hidden
的元素即<hidden>
, 正确的选择器应该是 .hidden
为类(class)。
var $active = $('#img_loop img').not('.hidden');
演示
$(function(){
setInterval("updateImage()", 2500);
})
function updateImage() {
var $active = $('#img_loop img').not('.hidden');
var $next = $active.next();
if($next.length == 0){
$next = $('#img_loop img').first();
}
$active.fadeTo(1000, 0.0, function(){
$active.addClass('hidden');
$next.removeClass('hidden').css("opacity","initial")
})
}
.hidden {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img_loop">
<img src="https://placebear.com/g/64/64" alt="image1" />
<img src="https://placebear.com/g/63/63" alt="image2" class="hidden" />
<img src="https://placebear.com/g/62/62" alt="image3" class="hidden" />
</div>
关于javascript - JQuery img 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52177517/