jquerytools切換上滾動

你好播放/暫停按鈕即時建立在Jquerytools幻燈片，使用這種http://jquerytools.org/demos/scrollable/gallery.html jquerytools切換上滾動

並自動滾動http://jquerytools.org/documentation/scrollable/autoscroll.html

我的問題是我可以合併播放&暫停按鈕，使如果播放活動，暫停顯示，反之亦然。

http://jsfiddle.net/PcAwU/在這裏你可以找到我的代碼..

此外，如果你能告訴我如何改變

<button type="button" onClick="api.play()">Play</button>

白衣正常IMG鏈接，這樣我就可以使圖像按鈕像

<a href="#" onClick="api.play()" ><img src="#"></a>

只是正確的語法，

最後一個問題是，在這部分我嘗試用懸停替換de點擊。但第一個圖像加載頁面時不會出現..所以我創建了一個「故障」當我這樣做

此行是我變「點擊」和「懸停」

$(".items img").click(function() {

來源

2013-04-30 DreaminMedia Queretaro

使用解決

<script> 
$(function() { 
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true }); 

$(".items img").click(function() { 
    // see if same thumb is being clicked 
    if ($(this).hasClass("active")) { return; } 

    // calclulate large image's URL based on the thumbnail URL (flickr specific) 
    var url = $(this).attr("src").replace("_t", ""); 

    // get handle to element that wraps the image and make it semi-transparent 
    var wrap = $("#image_wrap").fadeTo("medium", 0.5); 

    // the large image from www.flickr.com 
    var img = new Image(); 


    // call this function after it's loaded 
    img.onload = function() { 

     // make wrapper fully visible 
     wrap.fadeTo("fast", 1); 

     // change the image 
     wrap.find("img").attr("src", url); 

    }; 

    // begin loading the image from www.flickr.com 
    img.src = url; 

    // activate item 
    $(".items img").removeClass("active"); 
    $(this).addClass("active"); 

// when page loads simulate a "click" on the first image 
}).filter(":first").click(); 

// provide scrollable API for the action buttons 
window.api = root.data("scrollable"); 

}); 


function toggle(el){ 
    if(el.className!="play") 
    { 
     el.className="play"; 
     el.src='images/play.png'; 
     api.pause(); 
    } 
    else if(el.className=="play") 
    { 
     el.className="pause"; 
     el.src='images/pause.png'; 
     api.play(); 
    } 

    return false; 
} 

</script>

和按鈕是這樣的：

<input type="image" src="images/atras.png" onclick="api.prev()" > 

    <input type="image" src="images/pause.png" class="pause" onclick="toggle(this);" > 

    <input type="image" src="images/adelante.png" onclick="api.next()" >

我希望這有助於有人

來源

2013-04-30 20:16:11

jquerytools切換上滾動

回答

相關問題