Question

我在精选图片下面有一个产品缩略图列表。

我正在尝试做的是，当点击下一个或上一个按钮时出现在特色图像中时，缩略图列表中的下一个和上一个图像应该显示为特色图像。

基本上每个产品缩略图都会显示在精选图片下方，作为手动高级幻灯片放映。

这是查看我想要实现的内容的网址。 site

以下是我正在尝试使用的代码：

var slide_list_siblings =jQuery('.product_thumbnails li a').map(function()
    {return jQuery(this).get()});

var slide_list_array = slide_list_siblings;

var slide_list_start = slide_list_siblings[0];

var slide_list_next =slide_list_array[(jQuery.inArray(slide_list_start, slide_list_array) + 1) % slide_list_array.length];

var slide_list_prev = slide_list_array[(jQuery.inArray(slide_list_start, slide_list_array) - 1 + slide_list_array.length) % slide_list_array.length];


jQuery('a#product_thumbnails_next').click(function(event) {
slide_list_next.click();
});

jQuery('a#product_thumbnails_prev').click(function(event) {
slide_list_prev.click();
});

Answer 1

问题是您在第一次点击后使用相同的slide_list_next和slide_list_prev，但它们仍然指向相同的对象，列表中的第二个和最后一个项目。

以下代码将跟踪当前选定的项目

(function(){    
  var thumbs = jQuery('.product_thumbnails li a');
  var thumbs_count = thumbs.length;
  var current_index = 0;

  // Track the currently selected item, so that clicking on the thumbnails
  // Doesn't mess up our current_index
  thumbs.click(function(){
      current_index = thumbs.index(this);    
  });

  // on clicking next button
  jQuery('a#product_thumbnails_next').click(function(event) {
    current_index++;
    // wrap around
    current_index = current_index % thumbs_count;
    thumbs[current_index].click();
  });

  //  on clicking on prev button
  jQuery('a#product_thumbnails_prev').click(function(event) {
    current_index--;
    // wrap around
    current_index = (current_index + thumbs_count) % thumbs_count;
    thumbs[current_index].click();
  });    
})();

我强烈建议您将箭头移到顶部，因为每次点击某个项目时它们都会移动，这真的很烦人。另一个选择是确保图像具有相同的高度。

下一个上一个链接单击jquery

1 个答案: