点击addclass('active')
thm-img下一个sl-rgh元素
$(document).ready(function() {
var Thumbnail = $('.thm-img'); // main image wrapper
var ThumbnailActive = $('.thm-img.active'); // main image wrapper active
var Numeric = $('.numeric'); //slider number
var NumericActive = $('.numeric.active'); //slider number
var AllNumber = $(Thumbnail).length; // Thumbnail counter
var SlideNext = $('.sl-rgh'); //right arrow
var ThumbnailsContainer = $('.thumb-wrp');
// Thumbnails counter
function ThumbnailCounter() {
Thumbnail.each(function() {
var CurrentActive = $(this).index() + 1; //return current number active thumbnail
$(this).children('span').append(CurrentActive + '/' + AllNumber);
});
Thumbnail.mouseenter(function() {
//active
Thumbnail.removeClass('active');
$(this).addClass('active');
//numeric
Numeric.removeClass('active');
$(this).children(Numeric).addClass('active')
});
}
new ThumbnailCounter();
// slide right
function SlideRight() {
SlideNext.on('click', function() {
ThumbnailsContainer.animate({
'scrollTop': '+=115px'
}, 100);
Thumbnail.find(NumericActive).parent(Thumbnail).next().addClass('active');
});
}
new SlideRight();
});.det-sl-wrp {
position: relative;
display: block;
width: 100%;
overflow: hidden;
height: 480px;
background: #FFFFFF;
border: 1px solid #fff;
margin: 8px 0 8px 0;
box-sizing: border-box;
}
.mn-img {
position: relative;
width: 641px;
height: 100%;
overflow: hidden;
background: #BAC0C6;
float: left;
border-right: 1px solid #fff;
box-sizing: border-box;
}
.mn-img a {
opacity: 1;
}
.mn-img .flex-direction-nav .flex-prev {
left: 40px;
}
.mn-img .flex-direction-nav .flex-next {
right: 40px;
}
.thumb-wrp {
position: relative;
float: left;
width: 153px;
overflow-y: auto;
height: 100%;
margin: 0 0 0 4px;
}
.thumb-wrp li {
float: none !important;
}
.thumb-wrp .flex-viewport {
height: 100% !important;
}
#detail-slider .flex-viewport {
height: 100% !important;
}
.mn-img img {
float: left;
width: 100%;
height: 100%;
}
.mn-img iframe {
position: relative;
z-index: 1;
}
.sl-lft,
.sl-rgh {
cursor: pointer;
top: 0;
left: 0;
position: absolute;
width: 200px;
height: 100%;
z-index: 1;
transition: opacity 0.3s;
opacity: 0;
}
.sl-lft::after {
position: absolute;
content: '';
width: 60px;
height: 80px;
left: 7px;
top: 200px;
background: rgba(132, 143, 153, 0.9) url("../img/icons/left-arrow.svg") no-repeat center;
border-radius: 3px;
background-size: 25px;
}
.sl-rgh::after {
position: absolute;
content: '';
width: 60px;
height: 80px;
right: 7px;
top: 200px;
background: rgba(132, 143, 153, 0.9) url("../img/icons/right-arrow.svg") no-repeat center;
border-radius: 3px;
background-size: 25px;
}
.sl-rgh {
left: inherit;
right: 226px;
/* background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=1);*/
}
.sl-rgh:hover,
.sl-lft:hover {
opacity: 1;
}
.sl-rgh-off,
.sl-lft-off {
display: none;
cursor: default;
top: 0;
left: 0;
position: absolute;
width: 40%;
height: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0);
}
.sl-rgh-off {
left: inherit;
right: 154px;
}
.thm-img {
position: relative;
width: 100%;
display: block;
height: 115px;
margin: 0;
box-sizing: border-box;
transition: border 0.3s, left 0.3s;
}
.thm-img img {
width: 100%;
height: 100%;
}
.numeric {
opacity: 0;
position: absolute;
left: 5px;
top: 5px;
border-radius: 2px;
font-size: 10px;
color: #fff;
padding: 2px 0 1px 0;
line-height: 11px;
width: 30px;
z-index: 11;
background-color: #E78211;
text-align: center;
font-family: sans-serif;
transition: all 0.2s ease-in-out;
}
.numeric.active {
opacity: 1;
transition: all 0.2s ease-in-out;
}
.active-thumb,
.active-thumb span {
opacity: 1;
transition: all 0.2s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="det-sl-wrp">
<div class="sl-rgh-off"></div>
<!-- disable right arrow when slider ends -->
<div class="sl-lft-off"></div>
<!-- disable left arrow when slider ends -->
<div class="sl-rgh"></div>
<div class="sl-lft"></div>
<div class="mn-img">
<img class="full-img" src="../img/img/a.jpg">
<img class="full-img" src="../img/img/b.jpg">
<img class="full-img" src="../img/img/c.jpg">
<img class="full-img" src="../img/img/d.jpg">
<img class="full-img" src="../img/img/a.jpg">
<img class="full-img" src="../img/img/c.jpg">
<img class="full-img" src="../img/img/b.jpg">
<img class="full-img" src="../img/img/d.jpg">
</div>
<div class="thumb-wrp scrollbar-inner">
<div class="thm-img">
<img src="../img/img/a.jpg"><span class="numeric active"></span>
</div>
<div class="thm-img">
<img src="../img/img/b.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/c.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/d.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/a.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/c.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/b.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/d.jpg"><span class="numeric"></span>
</div>
</div>
</div>
答案 0 :(得分：1)
我想它会是这样的，我现在可能已经使用了jQuery 2年了，所以在使用之前测试一下它完全不在我的记忆中：
$('.sl-rgh').on('click', function(){
var add_active_to_next = false;
$('.thm-img').map(function(e){
if($(e).hasClass('active')){
add_active_to_next = true;
$(e).removeClass();
}
if(add_active_to_next === true){
add_active_to_next = false;
$(e).addClass('active');
}
});
});