使用JQuery更改内容

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

Live网站：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>'); 
}); 
});

来源

2013-03-22 user2096890

'$（ '＃幻灯底部p'）HTML（ '你的字符串'）;'HTTP：// API .jquery.com/html/ – 2013-03-22 18:19:00

或向上看.trigger – mplungjan 2013-03-22 18:19:13

取而代之替换内容，为什么没有在HTML上的所有三张幻灯片和隐藏/显示/动画化容器？ – 2013-03-22 18:19:29

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

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

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

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

来源

2013-03-22 18:50:15

我的意见，这是更好地在页面上可用的幻灯片，并使用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/

来源

2013-03-22 18:58:14

使用JQuery更改内容

回答

相关问题