Question

您好我正在使用此http://jquerytools.org/demos/scrollable/gallery.html

在Jquerytools上构建幻灯片

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

我的问题是我可以合并Play＆amp;暂停按钮，如果播放处于活动状态，则显示暂停，反之亦然..

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

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

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

使用正常的img链接，这样我就可以制作像

这样的图像按钮

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

只需使用正确的语法

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

此行是我用“悬停”

更改“点击”的地方

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

我希望这有助于某人

jquerytools在可滚动上切换播放/暂停按钮

1 个答案: