自定义jquery滑块|点击菜单项更改Silde

Question

这里是我的代码/例如：http://jsfiddle.net/6j4cT/14/

滑块完美的作品，现在都后，我是如果你点击任何“新闻项”中说的“节点1 “例如相应的图像将呈现 - 同为‘节点2’

// News Article Slideshow 
    var periodToChangeSlide = 5000; 
    var pp_slideshow = undefined; 
    var currentPage = 0; 

    $('#news-feature-img-wrap li').css('display','list-item').slice(1).css('display','none'); 
    $('#news-items li:first').addClass('active'); 

    $("#news-feature-wrap #news-items li").click(function() { 
    $(this).parent().addClass('active'); 
    $(this).parent().siblings().removeClass('active'); 

    var index = $(this).parent().index(); 
    var toShow = $("#news-feature-wrap #news-feature-img-wrap li").eq(index); 
    toShow.show(); 
    toShow.siblings().hide(); 
    currentPage = index; 
    $.stopSlideshow(); 
    }); 

    $.startSlideshow = function(){ 
    if(typeof pp_slideshow == 'undefined'){ 
    pp_slideshow = setInterval($.startSlideshow, periodToChangeSlide); 
    } else { 
    $.changePage(); 
    } 
    } 

    $.stopSlideshow = function(){ 
    clearInterval(pp_slideshow); 
    pp_slideshow= undefined; 
    } 
    $.changePage = function(){ 
    var numSlides= $('#news-feature-wrap #news-feature-img-wrap li').length; 
    currentPage = (currentPage + 1) % numSlides; 
    var menu = $('#news-feature-wrap #news-items li').eq(currentPage); 
    menu.addClass('active'); 
    menu.siblings().removeClass('active'); 

    var toShow = $("#news-feature-wrap #news-feature-img-wrap li").eq(currentPage); 
    toShow.show(); 
    toShow.siblings().hide(); 
    } 

    $.startSlideshow(); 

Answer 1

我修改你的$.changePage功能略有接受内部参数：

$.changePage = function(internal) { //add this optional parameter 
    var numSlides= $('#news-feature-wrap #news-feature-img-wrap li').length; 
    if (typeof internal == 'undefined') currentPage = (currentPage + 1) % numSlides; //add this conditional 
    else currentPage = internal; //and this else 
    ... 

然后，你可以添加一个简单的事件监听器：

$('#news-items').on('click', 'li', function() { 
    //stop and restart to reset the interval 
    $.stopSlideshow(); 
    $.changePage($(this).index()); 
    $.startSlideshow(); 
}); 

Fiddle

jQuery的1.4.3 - 1.6.4：

$('#news-items').delegate('li', 'click', function() { 
    //stop and restart to reset the interval 
    $.stopSlideshow(); 
    $.changePage($(this).index()); 
    $.startSlideshow(); 
}); 

Fiddle