Question

嗨我试图实现一个像你在yahoo.com上看到的那个“新闻滑块”...我几乎拥有100％的代码..（如果你想在这里比较它们是我的代码{{ 3}}）

我的代码中遗漏了什么，（忘了设计）是，在我的滑块中你必须在每个项目上使用clic，我试图在javascript上替换Onclick for Hover，它有效，但是库中的fisrt图像停止工作，所以当你打开滑块时，你会看到一个丢失的图像。

其他一点..也非常重要，在yahoo.com之后，“x秒”滑块转到下一个项目，依此类推......所有Thumnails都被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;
}

Answer 1

要解决悬停问题，您需要进行一些快速更改：将点击更改为打开（..），类似于只悬停（..）新标准。

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

然后您需要更新底部单击事件以鼠标悬停以模拟悬停效果。 Trigger是一个用于触发某些事件的comman函数。

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

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

现在要有一个播放功能，你需要一个计数器/和设置间隔，如下所示：

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/

构建一个JQuery工具滑块，如yahoo.com滑块详细信息

1 个答案: