JS/jQuery 使用下一个和上一个图像箭头进行导航的数组循环缩略图

Question

我对数组相当陌生，我很感兴趣在按下下一个或上一个箭头时使用它来控制一系列缩略图位置。此外，只要图像在阵列中完成一个循环，这些拇指就应该循环。我使用了一系列if/else语句和拼接来添加和删除需要回收的缩略图。

我成功地让“下一步”按钮完成了我正在努力实现的任务，但我似乎无法让“上一步”按钮以相同的方式运行并以相反的方向反转缩略图流。我试过很多不同的东西，但都没有成功。

// find elements
var $galleryThumbs = $('#galleryThumbs');
var $galleryThumbsWrapper = $('#galleryThumbsWrapper');
var $next = $('#nextBtn');
var $prev = $('#prevBtn');

var $thumb01 = $('.thumb#t01');
var $thumb02 = $('.thumb#t02');
var $thumb03 = $('.thumb#t03');
var $thumb04 = $('.thumb#t04');
var $thumb05 = $('.thumb#t05');
var $thumb06 = $('.thumb#t06');
var $thumb07 = $('.thumb#t07');

// handle click and add class
var pic = new Array();
pic = [$thumb05, $thumb06, $thumb07, $thumb01, $thumb02, $thumb03, $thumb04];

var x = $($galleryThumbsWrapper);

var thumbOrder = 0;

function checkNextOrder(thumbOrder) {
  x.css('float', 'left');
  if (thumbOrder == 0) {
    console.log("thumbOrder == 0");
    pic.splice(0, 1, $thumb04);
    x.append($thumb04);
    return thumbOrder;

  } else if (thumbOrder == 1) {
    console.log("thumbOrder == 1");
    pic.splice(0, 1, $thumb05);
    x.append($thumb05);
    return thumbOrder;

  } else if (thumbOrder == 2) {
    console.log("thumbOrder == 2");
    pic.splice(0, 1, $thumb06);
    x.append($thumb06);
    return thumbOrder;

  } else if (thumbOrder == 3) {
    console.log("thumbOrder == 3");
    pic.splice(0, 1, $thumb07);
    x.append($thumb07);
    return thumbOrder;

  } else if (thumbOrder == 4) {
    console.log("thumbOrder == 4");
    pic.splice(0, 1, $thumb01);
    x.append($thumb01);
    return thumbOrder;

  } else if (thumbOrder == 5) {
    console.log("thumbOrder == 5");
    pic.splice(0, 1, $thumb02);
    x.append($thumb02);
    return thumbOrder;

  } else if (thumbOrder == 6) {
    console.log("thumbOrder == 6");
    pic.splice(0, 1, $thumb03);
    x.append($thumb03);
    return thumbOrder;
  }
}



function checkPrevOrder(thumbOrder) {
  x.css('float', 'right');
  console.log('previous');
  if (thumbOrder == 6) {
    console.log("thumbOrder == 6");
    pic.splice(6, 1, $thumb04);
    x.append($thumb04);
    return thumbOrder;
  } else if (thumbOrder == 5) {
    console.log("thumbOrder == 5");
    pic.splice(6, 1, $thumb03);
    x.append($thumb03);
    return thumbOrder;
  } else if (thumbOrder == 4) {
    pic.splice(6, 1, $thumb02);
    x.append($thumb02);
    return thumbOrder;
  } else if (thumbOrder == 3) {
    console.log("thumbOrder == 3");
    pic.splice(6, 1, $thumb01);
    x.append($thumb01);
    return thumbOrder;
  } else if (thumbOrder == 2) {
    console.log("thumbOrder == 2");
    pic.splice(6, 1, $thumb07);
    x.append($thumb07);
    return thumbOrder;
  } else if (thumbOrder == 1) {
    console.log("thumbOrder == 1");
    pic.splice(6, 1, $thumb06);
    x.append($thumb06);
    return thumbOrder;
  } else if (thumbOrder == 0) {
    console.log("thumbOrder == 0");
    pic.splice(6, 1, $thumb05);
    x.append($thumb05);
    return thumbOrder;
  }
}

$($next).on('click', function() {
  console.log('next');
  console.log("Thumborder is currently at:" + thumbOrder);
  if (thumbOrder < 6) {
    thumbOrder++;
    checkNextOrder(thumbOrder);
  } else {
    thumbOrder = 0;
    checkNextOrder(thumbOrder);
  }
})



$($prev).on('click', function() {
  console.log('prev');
  if (thumbOrder > 0) {
    thumbOrder--;
    checkPrevOrder(thumbOrder);
  } else {
    thumbOrder = 6;
    checkPrevOrder(thumbOrder);
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#galleryThumbs {
  position: absolute;
  width: 769px;
  height: 90px;
  top: 100px;
  left: 256px;
  /*overflow: hidden;*/
  padding-left: 2px;
}

#galleryThumbsWrapper {
  position: absolute;
  width: 1078px;
  height: 90px;
  left: -153px;
}

.thumb {
  float: left;
  width: 100px;
  height: 50px;
  padding-top: 10px;
  padding-right: 2px;
}

.thumb img {
  width: 70%;
}

#nextBtn {
  position: absolute;
  width: 72px;
  height: 72px;
  left: 800px;
  top: 112px;
  cursor: pointer;
}

#nextBtn img {
  width: 50%;
}

#prevBtn {
  position: absolute;
  width: 72px;
  height: 72px;
  left: 52px;
  top: 112px;
  cursor: pointer;
}

#prevBtn img {
  width: 50%;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="galleryThumbs">
  <div id="galleryThumbsWrapper">
    <div class="thumb" id="t05"><img src="https://i.ytimg.com/vi/UCgERDCYii8/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCfo2vTp1vra68dAfNSADkAjA_P1w"></div>
    <div class="thumb" id="t06"><img src="https://i.ytimg.com/vi/Fj8G9dGuNkU/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAtZua5DkREddQL16of68eZ-9uM7w"></div>
    <div class="thumb" id="t07"><img src="https://i.ytimg.com/vi/9BjvxQnk0qA/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAsBtUg6iahpBrriWLcBhVLnaDrYg"></div>
    <div class="thumb" id="t01"><img src="https://i.ytimg.com/vi/TCkmKgUp1ak/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAR6VNzvmxfP3Q7Hzuj2721PD4cGg"></div>
    <div class="thumb" id="t02"><img src="https://i.ytimg.com/vi/p0t0J_ERzHM/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBAp9YZP9Ktnvf2n0T0kgYgmlvCYg"></div>
    <div class="thumb" id="t03"><img src="https://i.ytimg.com/vi/L-s_h5PS7VQ/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA2peKpky-S2clFMM2QDepYL1fumw"></div>
    <div class="thumb" id="t04"><img src="https://i.ytimg.com/vi/CCb_XbmB_iE/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC2hr7_n6PMmBiqHshY1AotfE4lSg"></div>
  </div>
</div>


<div id='nextBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png"></div>
<div id='prevBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_left_alt1-512.png"></div>

我已在上面列出我的问题以供审核。如果有人有更多 simple/elegant 的方法来解决这个问题，将不胜感激您的反馈。

Answer 1

是的，这段代码可以使用对象进行重构。看看这个：

var pic = [$('.thumb#t05'), $('.thumb#t06'),  $('.thumb#t07'), $('.thumb#t01'), $('.thumb#t02'), $('.thumb#t03'), $('.thumb#t04')];
var x = $('#galleryThumbsWrapper');
var thumbOrder = 0;

var obj = {
    0 : pic[6],
    1 : pic[0],
    2 : pic[1], 
    3 : pic[2],
    4 : pic[3],
    5:  pic[4],
    6 : pic[5]
};


function checkNextOrder(thumbOrder){
   pic.splice(0, 1, obj[thumbOrder]);
   x.append(obj[thumbOrder]);
  return thumbOrder;
}

var obj2 = {
    6 : pic[6],
    5 : pic[5],
    4 : pic[4],
    3 : pic[3],
    2 : pic[2],
    1 : pic[1],
    0 : pic[0],
};

function checkPrevOrder(thumbOrder){
    x.css('float','right');
    
   pic.splice(6, 1, obj2[thumbOrder]);
   x.append(obj2[thumbOrder]);
   return thumbOrder;     
}

$('#nextBtn').on('click', function() {
  if(thumbOrder < 6)
    thumbOrder++;
  else
    thumbOrder = 0;
  checkNextOrder(thumbOrder);
});


$('#prevBtn').on('click', function() {
  if(thumbOrder > 0)
    thumbOrder--;
  else
    thumbOrder = 6;
  checkPrevOrder(thumbOrder);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#galleryThumbs {
  position: absolute;
  width: 769px;
  height: 90px;
  top: 100px;
  left: 256px;
  /*overflow: hidden;*/
  padding-left: 2px;
}

#galleryThumbsWrapper {
  position: absolute;
  width: 1078px;
  height: 90px;
  left: -153px;
}

.thumb {
  float: left;
  width: 100px;
  height: 50px;
  padding-top: 10px;
  padding-right: 2px;
}

.thumb img {
  width: 70%;
}

#nextBtn {
  position: absolute;
  width: 72px;
  height: 72px;
  left: 800px;
  top: 112px;
  cursor: pointer;
}

#nextBtn img {
  width: 50%;
}

#prevBtn {
  position: absolute;
  width: 72px;
  height: 72px;
  left: 52px;
  top: 112px;
  cursor: pointer;
}

#prevBtn img {
  width: 50%;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="galleryThumbs">
  <div id="galleryThumbsWrapper">
    <div class="thumb" id="t05"><img src="https://i.ytimg.com/vi/UCgERDCYii8/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCfo2vTp1vra68dAfNSADkAjA_P1w"></div>
    <div class="thumb" id="t06"><img src="https://i.ytimg.com/vi/Fj8G9dGuNkU/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAtZua5DkREddQL16of68eZ-9uM7w"></div>
    <div class="thumb" id="t07"><img src="https://i.ytimg.com/vi/9BjvxQnk0qA/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAsBtUg6iahpBrriWLcBhVLnaDrYg"></div>
    <div class="thumb" id="t01"><img src="https://i.ytimg.com/vi/TCkmKgUp1ak/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAR6VNzvmxfP3Q7Hzuj2721PD4cGg"></div>
    <div class="thumb" id="t02"><img src="https://i.ytimg.com/vi/p0t0J_ERzHM/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBAp9YZP9Ktnvf2n0T0kgYgmlvCYg"></div>
    <div class="thumb" id="t03"><img src="https://i.ytimg.com/vi/L-s_h5PS7VQ/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA2peKpky-S2clFMM2QDepYL1fumw"></div>
    <div class="thumb" id="t04"><img src="https://i.ytimg.com/vi/CCb_XbmB_iE/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC2hr7_n6PMmBiqHshY1AotfE4lSg"></div>
  </div>
</div>

<div id='nextBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png"></div>
<div id='prevBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_left_alt1-512.png"></div>

Answer 2

没有必要硬编码所有 $thumb。

这是我更简单的解决方案：https://jsfiddle.net/9bdj5mnx/

Answer 3

我的建议是根据方向使用 .detach() and reinserting it back into the dom using a combination of .first with .append() &.last() with .prepend() 删除元素。

// find elements
var $galleryThumbsWrapper = $('#galleryThumbsWrapper');
var $next = $('#nextBtn');
var $prev = $('#prevBtn');

$prev.on('click', function () {
  // $('.thumb') grabs all divs with that class
  // grab first element using .first 
  // then detach from dom and append to the end
  var $firstItem = $('.thumb').first().detach();
  $galleryThumbsWrapper.append($firstItem);
});

$next.on('click', function () {
  // grab last element using .last 
  // then detach from dom and prepend to the front
  var $lastItem = $('.thumb').last().detach();
  $galleryThumbsWrapper.prepend($lastItem);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#galleryThumbs {
  position: absolute;
  width: 769px;
  height: 90px;
  top: 100px;
  left: 256px;
  /*overflow: hidden;*/
  padding-left: 2px;
}

#galleryThumbsWrapper {
  position: absolute;
  width: 1078px;
  height: 90px;
  left: -153px;
}

.thumb {
  float: left;
  width: 100px;
  height: 50px;
  padding-top: 10px;
  padding-right: 2px;
}

.thumb img {
  width: 70%;
}

#nextBtn {
  position: absolute;
  width: 72px;
  height: 72px;
  left: 800px;
  top: 112px;
  cursor: pointer;
}

#nextBtn img {
  width: 50%;
}

#prevBtn {
  position: absolute;
  width: 72px;
  height: 72px;
  left: 52px;
  top: 112px;
  cursor: pointer;
}

#prevBtn img {
  width: 50%;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="galleryThumbs">
  <div id="galleryThumbsWrapper">
    <div class="thumb" id="t05"><img src="https://i.ytimg.com/vi/UCgERDCYii8/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCfo2vTp1vra68dAfNSADkAjA_P1w"></div>
    <div class="thumb" id="t06"><img src="https://i.ytimg.com/vi/Fj8G9dGuNkU/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAtZua5DkREddQL16of68eZ-9uM7w"></div>
    <div class="thumb" id="t07"><img src="https://i.ytimg.com/vi/9BjvxQnk0qA/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAsBtUg6iahpBrriWLcBhVLnaDrYg"></div>
    <div class="thumb" id="t01"><img src="https://i.ytimg.com/vi/TCkmKgUp1ak/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAR6VNzvmxfP3Q7Hzuj2721PD4cGg"></div>
    <div class="thumb" id="t02"><img src="https://i.ytimg.com/vi/p0t0J_ERzHM/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBAp9YZP9Ktnvf2n0T0kgYgmlvCYg"></div>
    <div class="thumb" id="t03"><img src="https://i.ytimg.com/vi/L-s_h5PS7VQ/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA2peKpky-S2clFMM2QDepYL1fumw"></div>
    <div class="thumb" id="t04"><img src="https://i.ytimg.com/vi/CCb_XbmB_iE/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC2hr7_n6PMmBiqHshY1AotfE4lSg"></div>
  </div>
</div>


<div id='nextBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png"></div>
<div id='prevBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_left_alt1-512.png"></div>

JS/jQuery 使用下一个和上一个图像箭头进行导航的数组循环缩略图

JS/jQuery array looping thumbnails using next and previous image arrows for navigation

javascript

arrays

jquery

if-statement

thumbnails