0

您好，我正在使用此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>

只需使用正确的语法，

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

这条线是我用“悬停”更改“点击”的地方

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

1 回答 1

0

使用解决

<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-30T20:16:11.403 回答