Jquery滑塊/橫幅與UI滑塊縮略圖的組合

Question

任何人都可以建議我，如果我可以結合Jquery橫幅和UI滑塊小工具一起創建像這個網站上的橫幅？ - http://corporate.arcelormittal.com/

Answer 1

你可以用CSS3做更好的方法。你也可以用UI-Slider來做到這一點。答案在於實時改變價值。

jQuery的樣品

$(function(){ 
    var slider = $(".slider").slider(); 
    $(".event-listener1").click(function(){ 
    slider.slider("value", 0); 
    /* Slide to first image */ 
    }); 
    $(".event-listener2").click(function(){ 
    slider.slider("value", 20);  
    /* Slide to second image */ 
    }); 
    $(".event-listener3").click(function(){ 
    slider.slider("value", 40); 
    /* Slide to ... */ 
    }); 
    $(".event-listener4").click(function(){ 
    slider.slider("value", 60);  
    }); 
    $(".event-listener5").click(function(){ 
    slider.slider("value", 80);  
    }); 
    $(".event-listener6").click(function(){ 
    slider.slider("value", 100);  
    }); 
}); 

而且HTML預覽

<div> 
    <div class="slider"></div> 
    <a href="javascript:void(0);" class="event-listener1"> 
    Change value to 0 
    </a><br /> 
    <a href="javascript:void(0);" class="event-listener2"> 
    Change value to 20 
    </a><br /> 
    <a href="javascript:void(0);" class="event-listener3"> 
    Change value to 40 
    </a><br /> 
    <a href="javascript:void(0);" class="event-listener4"> 
    Change value to 60 
    </a><br /> 
    <a href="javascript:void(0);" class="event-listener5"> 
    Change value to 80 
    </a><br /> 
    <a href="javascript:void(0);" class="event-listener6"> 
    Change value to 100 
    </a> 

</div>