构建一个 Jquery Tool 滑块，如 yahoo.com 滑块详细信息

Question

嗨，我正在尝试实现一个“新闻滑块”，就像你在 yahoo.com 中看到的那样......我几乎拥有 100% 的代码......（如果你想在这里比较它们是我的代码 @987654321 @)

我的代码中缺少什么，（忘记设计）是，在我的滑块中，您必须单击每个项目，我尝试在 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;
}

Answer 1

要解决悬停问题，您需要进行一些快速更改：将点击更改为 on(..) 类似于刚刚 hover(..) 只是新标准。

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

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

}).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/