jQuery next().addClass() and prev().addClass() issue
jQuery next().addClass() and prev().addClass() issue
我正在尝试制作一个滑块。我有四个内容,我一个接一个地做,看不见。然后我有一个名为active-client
的类,它具有display: flex
属性。我用jQuery的addClass()
显示第一个内容。我想用箭头滑动它们,但它不起作用。
$( document ).ready(function() {
clientSection();
});
function clientSection(){
$('.client-unit').first().addClass('active-client');
$('.client-control-next, .client-control-prev').click(function() {
var $this = $(this),
curActiveClient = $('.clients-belt').find('.active-client'),
position = $('.clients-belt').children().index(curActiveClient),
clientNum = $('.client-unit').length;
if ($this.hasClass('client-control-next')) {
if (position < clientNum -1) {
$('.active-client').removeClass('active-client').next().addClass('active-client');
} else {
$('.client-unit').removeClass('active-client').first().addClass('active-client');
}
} else {
if (position === 0) {
$('.client-unit').removeClass('active-client').last().addClass('active-client');
} else {
$('.active-client').removeClass('active-client').prev().addClass('active-client');
}
}
});
}
#clients {
position: relative;
}
.clients-belt {
width: 100%;
position: relative;
}
.clients-belt .client-unit {
max-width: 750px;
margin: 0 0 50px -375px;
position: absolute;
top: 0px;
left: 50%;
z-index: 1;
display: none;
}
.clients-belt .client-unit.active-client {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.clients-belt .client-unit .client-face {
min-width: 300px;
text-align: center;
}
.clients-belt .client-unit .client-face img {
max-width: 100px;
border-radius: 50%;
}
.clients-belt .client-unit .client-face .client-name {
display: block;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
}
.clients-belt .client-unit .client-face .client-title {
font-size: 12px;
font-style: normal;
color: #999;
}
.clients-belt .client-unit .client-content {
font-size: 18px;
line-height: 36px;
font-weight: 300;
margin-top: -10px;
position: relative;
}
.client-controls {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.client-controls > div {
height: 40px;
width: 40px;
cursor: pointer;
}
.client-controls .client-control-next {
position: absolute;
top: 50%;
right: 10px;
}
.client-controls .client-control-prev {
position: absolute;
top: 50%;
left: 10px;
}
<div class="client-controls">
<div class="client-control-next"><img src="/img/clients/next.svg" alt=""></div>
<div class="client-control-prev"><img src="/img/clients/prev.svg" alt=""></div>
</div>
<div class="clients-belt">
<div class="client-unit">
<div class="client-face">
<img src="img/clients/client1.jpg" alt="client-face">
<strong class="client-name">Denn Summer</strong>
<em class="client-title">Director of Programmer</em>
</div>
<div class="client-content">
<div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
<p><strong>Photoshop's version of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris </p>
</div>
</div>
</div>
<div class="clients-belt">
<div class="client-unit">
<div class="client-face">
<img src="img/clients/client2.jpg" alt="client-face">
<strong class="client-name">Sott Spring</strong>
<em class="client-title">Director of Designer</em>
</div>
<div class="client-content">
<div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
<p><strong>Photoshop's version of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris </p>
</div>
</div>
</div>
<div class="clients-belt">
<div class="client-unit">
<div class="client-face">
<img src="img/clients/client3.jpg" alt="client-face">
<strong class="client-name">Bonn Winter</strong>
<em class="client-title">Nothing of Web</em>
</div>
<div class="client-content">
<div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
<p><strong>Photoshop's version of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris </p>
</div>
</div>
</div>
<div class="clients-belt">
<div class="client-unit">
<div class="client-face">
<img src="img/clients/client4.jpg" alt="client-face">
<strong class="client-name">Kate Roses</strong>
<em class="client-title">Director of Nothing</em>
</div>
<div class="client-content">
<div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
<p><strong>Photoshop's version of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
我已经更改了这部分关于HTML标记结构的代码。
if ($this.hasClass('client-control-next')) {
if (position < clientNum -1) {
$('.active-client').removeClass('active-client').parent().next().find(".client-unit").addClass('active-client');
} else {
$('.client-unit').removeClass('active-client').first().addClass('active-client');
}
} else {
if (position === 0) {
$('.client-unit').removeClass('active-client').last().addClass('active-client');
} else {
$('.active-client').removeClass('active-client').parent().prev().find(".client-unit").addClass('active-client');
}
}
请把这把小提琴拿来。
相关文章:
- issue with FB.Event.subscribe
- 当选择组中的单选按钮时,jQuery addClass
- javascript addClass没有'似乎没有触发类的css
- 使用Jquery Issue垂直重新排序Divs
- $animate addClass在angular 1.3中不起作用
- 创建了一个选项卡,但点击时不会起作用-jQuery issue/newbie
- <td> focusin event .addclass
- 什么是“;右“;使用addClass/delay/removeClass的方法
- jQuery find() Issue
- $route.reload(); Issue
- addClass,它更改bg图像,但在第一次加载时没有闪烁
- toggleClass/addClass不'不要输入
- PHP json_encode issue
- jQuery addClass/removeClass转换不是平滑的,而是断断续续的
- removeClass(如果单击addClass)
- jQuery next().addClass() and prev().addClass() issue
- Jquery ajax addClass issue
- Jquery .addClass Issue
- removeAttr / addClass issue on IE6
- jQuery addClass table issue