jquerytools在scrollable上切换播放/暂停按钮

Question

您好，我使用这个http://jquerytools.org/demos/scrollable/gallery.html在Jquerytools上构建了一个幻灯片。

和自动滚动http://jquerytools.org/documentation/scrollable/autoscroll.html

http://jsfiddle.net/PcAwU/

我的问题是我可以合并播放和暂停按钮，这样如果播放是活动的，就会显示暂停，反之亦然。

http://jsfiddle.net/PcAwU/在这里你可以找到我的代码..

另外，如果您能告诉我如何更改

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

点击正常的img链接，这样我就可以制作像这样的图像按钮

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

只要使用正确的语法，

最后一个问题是，在这一部分中，我尝试用hover替换de click。但是加载页面时不会显示第一张图片。所以当我这样做的时候，我创建了一个“故障”

这一行是我将"click“改为"hover”的地方。

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

Answer 1

使用

<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()" >

我希望这对某些人有帮助