我有一个代码,我需要执行简单的操作:我的 div 中有 28 个图像,我需要每 41 毫秒更改一次。
我有 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);
我需要做什么,每 41 毫秒的前一个图像应该获得可见性:无,显示:无,不透明度:0,下一个图像应该获得可见性:可见,显示: block 和不透明度:1。我应该怎么做是吗?
顺便说一句:我的代码不起作用
最佳答案
试试这个
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);
关于javascript - HTML 用 JS 间隔改变图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18595151/