создание слайдера JQuery как yahoo.com slider details

Question

Привет, я пытаюсь достичь «слайдера новостей», как тот, который вы можете видеть на yahoo.com ... У меня почти 100% кода .. (если вы хотите сравнить их здесь, мой код http://jsfiddle.net/PcAwU/1/)

Отсутствие в моем коде (забудьте о дизайне) заключается в том, что в моем слайдере вам нужно щелкнуть по каждому элементу, я попытался заменить Onclick for Hover на javascript, это сработало, но изображение 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() { 
.... 

Затем вам необходимо обновить событие нижнего щелчка мыши, чтобы смоделировать эффект зависания. Триггер - это функция 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/