使用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更改內容

回答

相關問題