我有自定义分页，是图像文件。通常它们会保持灰色，但一旦点击，点击的颜色就会变为绿色。
当我点击我的bx滑块上的“下一个”按钮（控件）时，我想让两件事发生。
将控件与bx-slide链接很简单，但我似乎无法将自定义分页与控件链接起来。自定义分页器在单击时可正常工作，并且分页时分页工作正常。但我无法将这两者同时连接起来。
我已经尝试了2个jQuery代码来完成这个任务，但都没有。请参阅下文。
jQuery＃1
此处发生的事件是“点击”。单击“下一步”按钮后，我想查找正在显示的幻灯片的索引号，将其保存在变量idx中，然后单击具有相应索引号的寻呼机的子（标签）。
$('.bx-next').on('click', function(){
var idx=$('.benefit-slider li').find("[aria-hidden='false']").index(this);
$('#slidePager li').eq(idx).children().on('click');
};
jQuery＃2
在此代码中，事件更改寻呼机的属性。单击“下一步”按钮时，我想保存变量idx2中显示的幻灯片的索引号。然后，如果显示的幻灯片的索引号匹配0，则相应的图像变为彩色（通知颜色图标以-c结尾，而灰色图标以-g结尾）。
$('.bx-next').on('click', function(){
var idx2 = $('.benefit-container li').index(this);
if($('.benefit-container li').eq(idx2)==0){
$('.b-cost').attr('src','/img/benefit-lowcost-c.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==1){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-c.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==2){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-c.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==3){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-c.png');
};
});
HTML
<!-- CUSTOM PAGER -->
<div class="benefit-container-wrap">
<ul id="slidePager">
<li class="b-conts1">
<a href="#">
<img src="img/benefit-lowcost-c.png" class="b-cost">
</a>
</li>
<li class="b-conts2">
<a href="#">
<img src="img/benefit-location-g.png" class="b-location">
</a>
</li>
<li class="b-conts3">
<a href="#">
<img src="img/benefit-logistic-g.png" class="b-logistic">
</a>
</li>
<li class="b-conts4">
<a href="#">
<img src="img/benefit-cs-g.png" class="b-cs">
</a>
</li>
</ul>
</div>
<!-- BX SLIDER -->
<div class="benefit-container col-sm-7 col-md-6">
<ul class="benefit-slider">
<li>
<h3 class="b-cost">Competitive Price</h3>
</li>
<li>
<h3 class="b-location">Optimal Location</h3>
</li>
<li>
<h3 class="b-logistic">Total Logistic Solution</h3>
</li>
<li>
<h3 class="b-customer">Outstanding Customer Services</h3>
</li>
</ul>
</div>
加载Bx-Slider jQuery
// load bx-slider//
$('.benefit-slider').bxSlider({
pagerCustom:'#slidePager',
controls: true
});
//BxSlider custom pager //
$('.b-conts1').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-c.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts2').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-c.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts3').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-c.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts4').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-c.png');
});
非常感谢任何帮助！谢谢。
答案 0 :(得分：0)
<小时/>
{jQuery/CSS Selector}” 演示： pagerCustom: "#bx-pager"
指定自定义寻呼机的每个子（直接后代元素）必须具有此data-*属性：
data-slide-index="{Number}"
演示： <a data-slide-index="0" href="#/" class='active'>...
有关详细信息，请参阅演示中的评论
{functionName} 演示： onSlideBefore: bxMove
在SlideBefore API事件上调用的回调函数。此事件在幻灯片转换到目标幻灯片之前发生。
注意： ()值中的functionName已被省略。这是因为回调属性正在使用该函数（即bxMove()）。如果需要return的{{1}}值，则会使用function代替。
有关详细信息，请参阅演示中的评论
functionName() 演示： {0-index count}
给定索引号的API方法，它将执行到给定索引位置的幻灯片的转换。应使用点表示法调用bx.goToSlide({index})：
bxSliderObject加载插件时应该{bxSliderObject}.goToSlide(2);
实例化：
bxSliderObject有关详细信息，请参阅演示中的评论
演示： var/const {bxSliderObject} = $("{selector}").bxSlider(...
<a data-slide-index="0" href="#/" class='active'>...类适用于.active，用于指示当前幻灯片索引位置的样式更改。
有关详细信息，请参阅演示中的评论
<小时/>
#bx-pager a/*~~~~~~
line no#
|08| Store bxSlider instance in a variable
|10| Callback function bxMove() invoked on SlideBefore event
*/ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$(function() {
const bx = $('#bx-slider').bxSlider({
pagerCustom: '#bx-pager',
onSlideBefore: bxMove
});
/*~~~~~~
line no#
|24| [API Callback][onSlideBefore] has default parameters.
==== $ele: jQuery Object of the destination element.
==== from: index number of departing position. (Not used)
==== to..: index number of destination position.
|25| [API Method][goToSlide()] Pass index, it will jump to it.
|26| Remove .active class from all pager links.
|27| Add .active class to the destination slide element.
*/ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function bxMove($ele, from, to) {
bx.goToSlide(to);
$('#bx-pager a').removeClass('active');
$ele.addClass('active');
}
});img {
display: block;
margin: 0 auto;
}
#bx-pager {
display: table;
margin: 0 auto .75em
}
/* Apply greyscale to all img in pager */
#bx-pager img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
#bx-pager a {
display: table-cell;
}
#bx-pager a.active {
outline: 3px ridge tomato;
}
/* Decrease greyscale to 0% to the img nested within active link */
#bx-pager a.active img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}