javascript - Jquery 滑块循环
问题描述
希望你一切顺利!我有一个无法正常工作的 jquery 卡滑块。当它转到最后一张幻灯片时,会出现空白屏幕。看起来很马车。当我尝试返回上一个滑块时,它也不起作用。
是否可以使滑块从最后一张卡转到第一张卡?将其从最后一张幻灯片传输到第一张幻灯片的循环。如果最后一张卡片被查看,我不希望它结束,我想从头开始。
任何帮助将不胜感激。
$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 变量命名约定说前缀
$
只有 Elements 集合 引用。这样做。 - 如果您有多个动画触发器,请不要在整个代码中制作动画,而是创建一个可重用的
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">⏴</button>
<button type="button" class="Carousel-next">⏵</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
在操作当前索引变量之后,请参阅上面的anim()
函数是如何重用的。 i
推荐阅读
- javascript - 动态添加表行后jquery不起作用
- encoding - FFmpeg 编码产生稍微不兼容的 MKV/MP4 容器
- c# - 实体框架 dbSet 不包含 getAll() 的定义
- java - 在元素顶部添加 DividerItemDecoration
- amazon-web-services - 如何在aws中计算实例小时数?
- php - file_get_contents 不适用于云存储
- javascript - Google 数据存储实体创建和更新
- css - div垂直对齐中心与相对位置
- material-ui - material-ui / 如何使用 'withStyles()' 设置 HOC 样式?
- c# - 使用 WITH MOVE 标识文件的有效位置。例外