个人中心
gpt4 book ai didi

javascript - Jquery slider 循环

转载 作者：行者123 更新时间：2023-11-30 20:06:17 26 4
gpt4 key购买 nike

希望你一切顺利!我有一个无法正常工作的 jquery 卡 slider 。当转到最后一张幻灯片时，出现空白屏幕。看起来很多马车。当我尝试返回到上一个 slider 时，它也不起作用。

是否可以让 slider 从最后一张卡片移动到第一张卡片？将其从最后一张幻灯片转移到第一张幻灯片的循环。如果查看了最后一张卡片，我不想结束，我想从头开始。

任何帮助将不胜感激。

$num = $('.my-card').length;
$even = $num / 2;
$odd = ($num + 1) / 2;

if ($num % 2 == 0) {
  $('.my-card:nth-child(' + $even + ')').addClass('active');
  $('.my-card:nth-child(' + $even + ')').prev().addClass('prev');
  $('.my-card:nth-child(' + $even + ')').next().addClass('next');
} else {
  $('.my-card:nth-child(' + $odd + ')').addClass('active');
  $('.my-card:nth-child(' + $odd + ')').prev().addClass('prev');
  $('.my-card:nth-child(' + $odd + ')').next().addClass('next');
}

$('.my-card').click(function() {
  $slide = $('.active').width();
  console.log($('.active').position().left);
  
  if ($(this).hasClass('next')) {
    $('.card-carousel').stop(false, true).animate({left: '-=' + $slide});
  } else if ($(this).hasClass('prev')) {
    $('.card-carousel').stop(false, true).animate({left: '+=' + $slide});
  }
  
  $(this).removeClass('prev next');
  $(this).siblings().removeClass('prev active next');
  
  $(this).addClass('active');
  $(this).prev().addClass('prev');
  $(this).next().addClass('next');
});


// Keyboard nav
$('html body').keydown(function(e) {
  if (e.keyCode == 37) { // left
    $('.active').prev().trigger('click');
  }
  else if (e.keyCode == 39) { // right
    $('.active').next().trigger('click');
  }
});



  

$('a.slide-control').on('click', function(e){
  e.preventDefault();
  var slides = $('.my-card');
  var nextSlide;
  $slide = $('.active').width();

  if($(this).attr('id') === "prev-slide"){
    nextSlide = $('.active').prev();
      $('.card-carousel').stop(false, true).animate({left: '+=' + $slide});
  } else {
    nextSlide = $('.active').next();
      $('.card-carousel').stop(false, true).animate({left: '-=' + $slide});
  }
  
  
  $(slides).each(function(){
      $(this).removeClass('prev active next');
  })
  
  $(nextSlide).addClass('active');
  $(nextSlide).prev().addClass('prev');
  $(nextSlide).next().addClass('next');
})
html body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow-x: hidden;
}

.card-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-carousel .my-card {
  height: 400px;
  width: 500px;
  position: relative;
  z-index: 1;
  -webkit-transform: scale(0.6) translateY(-2rem);
  transform: scale(0.6) translateY(-2rem);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  background: #2e5266;
  background: linear-gradient(to top, #2e5266, #6e8898);
  transition: 1s;
}

.card-carousel .my-card.active {
  z-index: 3;
  -webkit-transform: scale(1) translateY(0) translateX(0);
  transform: scale(1) translateY(0) translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: 1s;
}

.card-carousel .my-card.prev, .card-carousel .my-card.next {
  z-index: 2;
  -webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
  transform: scale(0.8) translateY(-1rem) translateX(0);
  opacity: 0.6;
  pointer-events: auto;
  transition: 1s;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="heading">
</div>
<div class="card-carousel">
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
</div>

  <div style="font-size:70px">
    <a class="slide-control" id="prev-slide" href=""><i class="fas fa-chevron-circle-left"></i></a>
    <a class="slide-control"  id="next-slide" href=""><i class="fas fa-chevron-circle-right"></i></a>
  </div>
</body>
</html>

最佳答案

  • 欢迎使用响应式设计(毕竟是 2018 年了)。 使用响应式单元，例如 % .
    如果您需要一个固定的宽度，而不是简单地创建一个中性包装器来封装您的可重复使用的灵活轮播!
  • 在命名类方面保持一致。使用 CSS 命名约定，例如:SUIT .
  • 不要使用 ID，否则您可能会发现自己在多个画廊的情况下到处复制粘贴 JS 代码。
  • 不要设计不必要的样式 html, body .将您的元素包装成 .Carousel包装器组件。
  • 如果您不使用实际的链接，请使用<button>元素(并相应地设置样式)。
  • 使用 CSS transform而不是 jQuery 的 .animate()只要有可能。
  • jQuery 变量命名约定说前缀为$只有元素集合 引用。这样做。
  • 如果您有多个动画触发器，请不要在您的代码中制作动画，而是创建一个可重复使用的 anim()函数 就是这样做的。触发器应该只增加或减少一个当前事件 索引计数器i 。
  • 了解 JS 基础知识，三元运算符 ?:
  • 使用Math.floor当试图获得中间索引时
  • 使用模块运算符 %将索引重置为 0当超过tot时(卡片数量)
  • 生成的代码应该看起来漂亮且易于阅读/调试:

$(".Carousel").each(function() {

  var $this = $(this),
      $btns = $this.find(".Carousel-prev, .Carousel-next"),
      $slider = $this.find(".Carousel-slider"),
      $cards = $slider.find(">*"),
      tot = $cards.length,
      i = Math.floor(tot / 2); // Somewhere in the middle

  function anim() {
    i = i < 0 ? tot - 1 : i % tot; // Fix index
    var $active = $cards.eq(i);
    $cards.removeClass('active prev next');
    $active.addClass('active');
    $active.prev().addClass('prev');
    $active.next().addClass('next');
    $slider.css({transform: `translateX(-${100*i}%)`}); // CSS! yey
  }

  $cards.on("click", function() {
    i = $cards.index(this);
    anim();
  });

  $btns.on("click", function() {
    i = $(this).is(".Carousel-next") ? ++i : --i;
    anim();
  });

  anim();

  // Keyboard nav
  $(document).on("keydown", function(e) {
    var k = e.which;
    if (k === 37 || k === 39) {
      i = k === 39 ? ++i : --i;
      anim();
    }
  });

});
/*QuickReset*/*{margin:0;box-sizing: border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

/* Carousel component */

.Carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.Carousel-slider {
  display: flex;
  height: 150px; /* for demo */
  transition: 1s;
  -webkit-backface-visibility: hidden;
}

.Carousel-slider>* {
  /* CARDS */
  position: relative;
  flex: 0 0 90%; /* 90 flex-basis */
  margin: 0 5%; /* 90 + 5 + 5 = 100 */
  height: 100%;
  cursor: pointer;
  pointer-events: none;
  background: #6e8898;
  object-fit: cover; /*In case the card is an <img>!*/
  transform: scale(0.8);
  transition: 1s;
  -webkit-backface-visibility: hidden;
}

.Carousel-slider>.active {
  opacity: 1;
  cursor: auto;
  flex: 0 0 80%;
  margin: 0 10%;
  transform: scale(1);
  pointer-events: auto;
}

.Carousel-slider>.prev {
  transform: translateX(24%) scale(0.8);
}

.Carousel-slider>.next {
  transform: translateX(-24%) scale(0.8);
}

.Carousel-slider>.prev,
.Carousel-slider>.next {
  opacity: 0.5;
  pointer-events: auto;
}

.Carousel-controls {
  text-align: center;
}

.Carousel-prev,
.Carousel-next {
  border: 0;
  height: 3rem;
  font-size: 2em;
  line-height: 1em;
  background: #000;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
<div class="Carousel">
  <div class="Carousel-slider">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <img src="//placehold.it/800x400/0bf/fff?text=IMAGINE!" alt="Carousel image!">
    <div>6</div>
    <img src="//placehold.it/800x400/f0b/fff?text=No+limits" alt="Carousel image!">
    <div>8</div>
    <div>9</div>
  </div>
  <div class="Carousel-controls">
    <button type="button" class="Carousel-prev">&#x23f4;</button>
    <button type="button" class="Carousel-next">&#x23f5;</button>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

请参阅上面的 anim()操作当前索引后函数被重用i变量。

关于javascript - Jquery slider 循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52904776/

26 4 0
文章推荐： javascript - 使用参数处理事件处理函数的更好方法是什么？
文章推荐： C# 非常慢的 StreamReader
文章推荐： c# - 在 C# 中追加到文本文件中
文章推荐： 无法运行使用 gcc (minGW) 编译的 .exe 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com