2

嗨，我试图实现一个“新闻滑块”，就像你在 yahoo.com 中看到的那样......我几乎拥有 100% 的代码......（如果你想在这里比较它们是我的代码http://jsfiddle .net/PcAwU/1/ )

我的代码中缺少的是，（忘记设计）是，在我的滑块中，你必须点击每个项目，我试图在 javascript 上替换 Onclick 为 Hover，它有效，但画廊上的第一个图像停止工作，因此，当您打开滑块时，您会看到丢失的图像。

其他点..也很重要，在“x 秒”之后，在 yahoo.com 中，滑块转到下一个项目，依此类推……所有的缩略图都是 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

To fix the hover problem you need to make some quick changes: Change the click to a on(..) similar to just hover(..) just the new standard.

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

Then You need to update the bottom click event to mouse over to simulate a hover effect. Trigger is a comman function to use to trigger some event.

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

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

Now to have a play feature, you need a counter/ and a set interval like so:

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);

This will go show new images every 1 second (1000 = 1sec), you can change this and manipulate it to your liking.

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

If you want to hover the active image, you need to do so with the css() or the addClass() functions. But You have done this already, All we have to do is a simple css change:

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

Here is the new update jSFilde: http://jsfiddle.net/PcAwU/4/

于 2013-05-06T21:39:10.840 回答