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

Posted 2023-03-29

技术标签:

【中文标题】使用下一个和上一个图像箭头进行导航的 JS/jQuery 数组循环缩略图【英文标题】：JS/jQuery array looping thumbnails using next and previous image arrows for navigation 【发布时间】：2019-02-04 21:41:02 【问题描述】：

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

我成功地获得了 Next 按钮来完成我正在努力实现的任务，但我似乎无法让 Previous 按钮以相同的方式运行并以相反的方向反转缩略图流。我尝试了很多不同的方法，但都没有成功。

// 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>

我已经在上面列出了我的问题以供审核。如果有人有更简单/优雅的方法来解决这个问题，我们将不胜感激。

【问题讨论】：

我已经编辑了我的答案 【参考方案1】：

我的建议是使用.detach() 将元素拔出，然后根据方向使用.first 与.append() &.last() 与.prepend() 的组合将其重新插入到dom 中。

// 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>

【讨论】：

【参考方案2】：

没有必要对所有$thumb进行硬编码。

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

【讨论】：

【参考方案3】：

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

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>

【讨论】：

我喜欢你的想法，但不幸的是，当我运行代码 sn-p 时它似乎不起作用。点击上一个或下一个按钮时有点问题。您现在可以查看此内容

以上是关于使用下一个和上一个图像箭头进行导航的 JS/jQuery 数组循环缩略图的主要内容，如果未能解决你的问题，请参考以下文章

当画廊只有一个图像时，jQuery 隐藏下一个和上一个按钮不起作用

iOS：如何使用按钮切换 Tableview 行？

我无法绑定箭头键事件

swift - 导航控制器删除后退按钮箭头

Segue 的数据结构？

导航图像在 jQuery 灯箱中未正确显示