自定义 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