Javascript 第二个映像的onclick应处于活动状态(即进行下一次()调用)
我在一个滑块中显示两个图像,一个挨着一个,带有下一个和上一个图标。 无法再添加一个场景,即在滑块中单击第二个图像应在flexslider中进行下一个()调用,依此类推 例如: 幻灯片#1为活动图像,侧面#2为半活动图像,单击“幻灯片#2”半活动图像区域应变为“活动”,而“幻灯片#3”应为半活动图像,依此类推 演示JSFIDLE: HTML:Javascript 第二个映像的onclick应处于活动状态(即进行下一次()调用),javascript,jquery,flexslider,Javascript,Jquery,Flexslider,我在一个滑块中显示两个图像,一个挨着一个,带有下一个和上一个图标。 无法再添加一个场景,即在滑块中单击第二个图像应在flexslider中进行下一个()调用,依此类推 例如: 幻灯片#1为活动图像,侧面#2为半活动图像,单击“幻灯片#2”半活动图像区域应变为“活动”,而“幻灯片#3”应为半活动图像,依此类推 演示JSFIDLE: HTML: 只需添加下面的处理程序 您需要处理图像上的单击事件并相应地移动它。检查下面的答案。 <div class="outerWideSlider">
只需添加下面的处理程序
您需要处理图像上的单击事件并相应地移动它。检查下面的答案。
<div class="outerWideSlider">
<div class="wideSlider">
<div class="flexslider" data-startat="0">
<ul class="slides">
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide1.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #1</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide2.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #2</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide3.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #3</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
$(document).ready(function () {
$(".wideSlider").each(function () {
var $this = $(this);
var $slider = $this.find(".flexslider");
var startat = $slider.attr("data-startat");
if (startat = 0) {
}
$slider.flexslider({
animation: 'slide',
easing: 'linear', // // Default: swing {NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
// useCSS: false, // Default: true
slideshow: false, // Default: True //Boolean: Animate slider automatically
slideshowSpeed: 7000, // Default: 7000 // Integer: Set the speed of the slideshow cycling, in milliseconds
animationLoop: true, // Default: true
startAt: startat,
controlNav: false,
directionNav: true,
nextText: " ",
prevText: " ",
start: function (slider) {
// $('.wideSlider .text-caption').fadeOut(100);
// var $s = slider.slides.eq(slider.currentSlide);
// $s.find('.text-caption').show();
},
before: function (slider) {
// $('.wideSlider .text-caption').hide();
},
after: function (slider) {
// var $s = slider.slides.eq(slider.currentSlide);
// $s.find('.text-caption').show();
}
});
});
})
$("li").click(function(){
if($(this).prev().hasClass("flex-active-slide")){
$(".flex-next").click();
}else if ($(this).next().hasClass("flex-active-slide")){
$(".flex-prev").click();
}
});