2

こんにちは、yahoo.com で見られるような「ニュース スライダー」を実現しようとしています...コードのほぼ 100% を持っています.. (それらを比較したい場合は、ここに私のコードがありますhttp://jsfiddle .net/PcAwU/1/ )

私のコードに欠けているのは（デザインを忘れて）、私のスライダーでは各項目をクリックする必要があるということです.JavaScriptでOnclickをHoverに置き換えようとしましたが、機能しましたが、ギャラリーの最初の画像が機能しなくなりました.そのため、スライダーを開くと、欠落した画像が表示されます。

その他のポイント.. また非常に重要です。yahoo.com では、"x 秒" 後にスライダーが次の項目に移動するなど... すべてのサムネイルが 4 対 4 でグループ化されます (私の場合は 5 対 5 で問題ありません) ) ... 4 つの項目をすべて通過した後、次のブロックに移動します。

どうすればそれを達成できますか!!. 私は本当にAPIを調べました。すべて、本当に迷っています。誰かが私を助けてくれることを願っています。私はここで本当に迷子になったからです。

ありがとう

ここにスクリプトがあります

$(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;
}
4

1 に答える 1

2

ホバーの問題を修正するには、いくつかの簡単な変更を加える必要があります: クリックを on(..) に変更します。

$(".items img").on("hover",function() {
....

次に、ホバー効果をシミュレートするために、下のクリックイベントをマウスオーバーに更新する必要があります。Trigger は、何らかのイベントをトリガーするために使用するコマンド関数です。

}).filter(":first").trigger("mouseover");

jSFiddle: http://jsfiddle.net/PcAwU/2/

再生機能を持たせるには、次のように counter/ と設定された間隔が必要です。

var count = 1;
setInterval(function(){
    count++; // add to the counter
    if($(".items img").eq(count).length != 0){ // eq(.. select by index [0],[1]..
        $(".items img").eq(count).trigger("mouseover");
    } else count = 0; //reset counter
},1000);

これにより、1 秒ごと (1000 = 1 秒) に新しい画像が表示されます。これを変更して、好みに合わせて操作できます。

jSFiddle: http://jsfiddle.net/PcAwU/3/

アクティブな画像をホバーしたい場合は、css()またはaddClass()関数を使用して行う必要があります。しかし、あなたはすでにこれを行っています.私たちがしなければならないのは、単純なcssの変更だけです:

.scrollable .active {
    ....
    border-bottom:3px solid skyblue;

これが新しい更新 jSFilde です: http://jsfiddle.net/PcAwU/4/

于 2013-05-06T21:39:10.840 に答える