HTML以JS间隔更改图像

HTML changing images with JS interval

本文关键字：图像 JS HTML      更新时间：2023-09-26

我有一个代码，我需要做一个简单的操作：我的div中有28个图像，我需要每41ms更改一次。

我有HTML:

<div class="full_slider">
<img id="bgs_49" style="visibility: visible; display: block; opacity: 1;" src="images/background/10_00049.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_50" src="images/background/10_00050.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_51" src="images/background/10_00051.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_52" src="images/background/10_00052.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_53" src="images/background/10_00053.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_54" src="images/background/10_00054.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_55" src="images/background/10_00055.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_56" src="images/background/10_00056.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_57" src="images/background/10_00057.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_58" src="images/background/10_00058.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_59" src="images/background/10_00059.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_60" src="images/background/10_00060.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_61" src="images/background/10_00061.jpg" class="full_slider_child" alt="bg" />
<img id="bgs_62" src="images/background/10_00062.jpg" class="full_slider_child" alt="bg" />

我有JS:

var bgs = ['49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '61', '60', '59', '58', '57', '56', '55', '54', '53', '52', '51', '50', '49']
var pos = 1;

setInterval(function() {
pos = (pos+1) % bgs.length;
pos_early = (pos-1) % bgs.length;
slider_next = $("#bgs_" + pos);
slider_prev = $("#bgs_" + pos_early);
slider_prev.css({
   'visibility' : 'hidden',
   'display'    : 'none',
   'opacity'    : 0 
});
slider_next.css({
   'visibility' : 'visible',
   'display'    : 'block',
   'opacity'    : 1 
});
}, 41);

我需要做的是，每41ms的前一张图像都应该获得可见性：无，显示：无，不透明度：0，下一张图像应该获得可见性，显示：块和不透明度：1。我该怎么做？

BTW：我的代码不工作

试试这个

var cntMax = $('.full_slider').find('img').length;
var cnt = 0;
setInterval(function(){
   $('.full_slider img:eq('+cnt+')').show().siblings().hide();
   cnt==cntMax? cnt=0:cnt++;
},41);

根据我在上面的评论，另一种选择是切换一个类，以便将所有css保留在样式表中，从而实现关注点的分离。

JS

setInterval(function () {
    $(".full_slider img").eq(0).removeClass('show').next('img').addClass('show').end().appendTo(".full_slider");
}, 41);

CSS

.full_slider_child.show {
    visibility: visible; 
    display: block; 
    opacity: 1;
}
相关文章：