Question

我有一个JQuery函数，可以根据您要查看的幻灯片更改显示的内容。您单击三个圆圈中的一个，然后它会发生变化，有点像幻灯片。但是，唯一的问题是您必须单击其中一个圆圈才能更改内容。我想有一个JQUERY函数，可以让所需的内容自动滑过，也许会有一些动画。如何自动执行代码？

直播网站：http://www.getstatewideroofing.com

JSFIDDLE：http://jsfiddle.net/h5wVc/4/

我的JQUERY（我使用的是1.8.2）：

$(document).ready(function() {
$('.circle1').click(function () {
    $('#slideshow img').replaceWith('<img src="images/roof.png"/>');
    $('#slideshow-bottom p').replaceWith('<p> Some text </p>');
});
$('.circle2').click(function () {
    $('#slideshow img').replaceWith('<img src="https://sphotos-a.xx.fbcdn.net/hphotos-
ash4/313870_456560374416571_509297138_n.jpg"/>');
    $('#slideshow-bottom p').replaceWith('<p>Some text</p>');
});
$('.circle3').click(function () {
    $('#slideshow img').replaceWith('<img src="http://i.imgur.com/1hxQNiw.jpg"/>');
    $('#slideshow-bottom p').replaceWith('<p>Some text</p>');
});
});

Answer 1

以下是如何构建自动滚动功能的示例。请注意，该节目不会重新开始（我已经离开了你这样做） - here是一个寻求帮助的好地方。我构建的示例将自动开始幻灯片放映并继续到下一个项目。您需要做的是将currentItem（请参阅我的代码）附加到数组的末尾，以便始终存在“下一个”幻灯片。这段代码以及上面的提示应该足以构建您正在寻找的内容。

$(function() {
    setInterval(update, 2000);
});

function update() {
  var ItemToLoad = currentItem.next();
  ItemToLoad.trigger('click');
  currentItem = ItemToLoad;
}

工作示例 http://jsfiddle.net/h5wVc/20/

Answer 2

我同意以下评论：最好让您的幻灯片在页面上可用，并使用css / javascript来动画并相应地显示它们，这是一个非常简单的方法来实现您的问题，但是设置一个初始标记，然后使用setInterval模拟组中下一张幻灯片的单击。像

这样的东西

var marker = 1;

var imgclick = function() {  
    marker = ( marker === 3 ? 1 : ++marker );
    $('.circle'+marker).click();
};

window.setInterval(imgclick,1000);

调用imgclick后的整数是以ms为单位模拟下一次单击之前的延迟，并且循环将在第三张幻灯片之后重置（尽管您可以通过使用

轻松更改此项以适应任意数量的幻灯片

marker = ( marker === $("[class^=circle]").length ? 1 : ++marker );

我已经更新了您的小提示，以显示此工作 - http://jsfiddle.net/h5wVc/28/

使用JQuery更改内容

2 个答案: