Question

我有一个使用Jquery的图像幻灯片。我希望它每5秒或自定义时间自动更改一次。在我的幻灯片中有下一个用于生成下一张幻灯片的按钮。

但这是我的问题。

如果我先运行或第一次点击，则不要在下一张图片中更改。但在第二，第三，...点击它可以不断变化。

2.如何在自定义超时中添加自动更改图片。因为我尝试添加setTimeout（），并且我使用“下一步”按钮使幻灯片显示变化非常快（闪烁）。

HTML文件：

<div class="slider">
    Next &raquo;
</div>

<div class="subbox1">
<div class="images">
    <img src="https://imageshack.us/a/img203/2859/thumb73.jpg" />
    <img src="https://imageshack.us/a/img20/4360/thumb72.jpg" />
    <img src="https://imageshack.us/a/img855/3400/thumb61h.jpg" />
</div>
</div>

<div class="subbox1">
<div class="images">
    <img src="https://imageshack.us/a/img853/3924/thumb71.jpg" />
    <img src="https://imageshack.us/a/img845/5805/thumb62m.jpg" />
    <img src="https://imageshack.us/scaled/large/163/thumb2nv.jpg" />
</div>
</div>

CSS文件

.slider {
    padding : 10px;
    background : #000;
    color : #FFF;
    width : 100px;
    margin-left : 10px;
}
.subbox1{
    float : left;
    width : 227px;
    height: 189px;
    position : relative;
    margin : 10px;
}

.images img {
    position : absolute;
    top : 0;
}


JS File
function anim(selector) {
    $(".images img", selector).first().appendTo($('.images', selector)).fadeOut(500);   
    $(".images img", selector).first().fadeIn(500);

    //Make slideshow blink
    setTimeout(function(){anim(selector)}, 5000);
}

$(".slider").click(function() {
    $(".subbox1").each(function() {anim(this)});
});

这是我的小提琴RESULT

Answer 1

您必须使用setInterval()方法。然后创建一个变量i作为计数器，每500ms增加一次值。

var i = 0, max = 5;
var interval = setInterval(function(){
    showSlide(i);
    i = 1 >= max ? 0 : ++i;
}, 500);

next_button.onclick = function(){
    i += 1;
    showSlide(i);
}

幸运的是

在图片幻灯片中添加延迟Jquery

1 个答案: