建立一个像yahoo.com滑块细节jQuery.com滑块的详细信息

嗨即时通讯试图实现一个“新闻滑块”就像你可以看到在yahoo.com ...我几乎有100％的代码..（如果你想比较他们这里是我的代码http://jsfiddle.net/PcAwU/1/）建立一个像yahoo.com滑块细节jQuery.com滑块的详细信息

什么是我的代码丢失，（忘了关于设计）是，在我的滑块你必须对每个项目clic，我试图取代Onclick悬停在javascript，它工作，但画廊上的鱼图像停止工作，所以当你只是打开滑块，你会看到一个缺失的图像。

其他点..也是非常重要的，在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; 
}

来源

2013-05-06 DreaminMedia Queretaro

要解决，你需要进行一些快速更改悬停问题：更改咔嗒上（..）类似，只需将鼠标悬停（.. ）只是新的标准。

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

然后您需要更新底部单击事件以鼠标悬停以模拟悬停效果。触发器是用来触发某些事件的指挥官功能。

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

来源

2013-05-06 21:39:10 Kivylius

太好了！它的工作，你有什么想法的另一点，?? – 2013-05-06 21:42:27

@DreaminMediaQueretaro将其添加到问题中。 – Kivylius 2013-05-06 21:45:41

就是这个部分的问题.....其他点..也是非常重要的，在yahoo.com“x秒”后滑块去下一个项目，等等......所有的Thumnails都被4为4，（在我的5乘5，多数民众赞成）...通过所有4项后，它进入下一个集团.. 我如何实现这一点！ – 2013-05-06 21:47:24

建立一个像yahoo.com滑块细节jQuery.com滑块的详细信息

回答

相关问题