0

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

但这是我的问题。

  1. 如果我第一次运行或第一次单击，它不会在下一张图片中改变。但是在第二，第三，..点击它可以连续变化。

    2.如何添加自动更改图片，在自定义超时。因为我尝试添加 setTimeout() ，并且我使用 Next 按钮使幻灯片更改非常快（闪烁）。

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)});
});

这是我的小提琴结果

4

1 回答 1

0

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

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);
}

好幸运

于 2013-05-25T13:39:46.380 回答