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

问题描述 投票：1回答：3

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

我成功地获得了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>

我在上面列出了我的问题以供审核。如果有人有更简单/更优雅的方式来解决这个问题，那么您的反馈将会非常感激。

javascript jquery arrays if-statement thumbnails
3个回答
0
投票

我的建议是使用.detach()取出元素并将其重新插入dom，使用.first与.append()和.last()以及.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>
0
投票

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

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

0
投票

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

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.