0

我有一个 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>');
});
});
4

2 回答 2

0

这是一个如何构建自动滚动功能的示例。请注意，节目不会重新开始（我已将其留给您执行）-这是寻求帮助的好地方。我构建的示例将自动启动幻灯片并继续到下一个项目。您需要做的是将currentItem（请参阅我的代码）附加到数组的末尾，以便始终有一个“下一张”幻灯片。这段代码和上面的提示应该足以让您构建您正在寻找的东西。

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

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

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

于 2013-03-22T18:50:15.373 回答
0

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

var marker = 1;

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

window.setInterval(imgclick,1000);

调用 imgclick 之后的整数是模拟下一次点击之前的延迟，以毫秒为单位，并且循环将在第三张幻灯片后重置（尽管您可以通过使用轻松更改此设置以容纳任意数量的幻灯片

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

我已经更新了你的小提琴来展示这个工作 - http://jsfiddle.net/h5wVc/28/

于 2013-03-22T18:58:14.027 回答