找到当前的幻灯片div并添加Class [英] Find current Slide div and add Class
问题描述
我正在尝试将Class添加到Current Slider div,我正在使用 Jssor Slider ,我已经尝试过将JS添加到当前幻灯片中,但是它没有用。我已将此JS与 Jssor Call 一起使用。
I'm trying to add Class to Current Slider div, I am using Jssor Slider, I've tried given JS below for add class to current slide, but it's not working. I have use this JS with Jssor Call.
// event fired when slider is "parked"
jssor_slider1.$On( $JssorSlider$.$EVT_PARK, function(slideIndex){
var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
var currentImage = allImages.eq(slideIndex);
var currentDiv = currentImage.parent("div");
currentDiv.addClass("current");
});
// event fired when slider starts moving
jssor_slider1.$On( $JssorSlider$.$EVT_POSITION_CHANGE, function(position){
// remove 'current' class from all slides
$(jssor_slider1.$Elmt).find(".current").removeClass("current");
});
Jssor Call Below:
Jssor Call Below:
jQuery(document).ready(function($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Shift:-100}},
{$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
];
var options = {
$AutoPlay: true,
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
$ArrowKeyNavigation: true, //Allows arrow key to navigate or not
$SlideWidth: 800, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, the default is width of 'slides' container
$SlideSpacing: 0, //Space between each slide in pixels
$Cols: 1, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
//New add for random transition
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 0, //The way to choose transition to play slideshow, 1: Sequence, 0: Random
$ShowLink: true
},
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//============== Find Current slide Code =====================//
// event fired when slider is "parked"
jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex) {
var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
var currentImage = allImages.eq(slideIndex);
var currentDiv = currentImage.parent("div");
currentDiv.addClass("current");
});
// event fired when slider starts moving
jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, function(position) {
// remove 'current' class from all slides
$(jssor_slider1.$Elmt).find(".current").removeClass("current");
});
//============================================================//
}); // Call end
(演示) 请查看小提琴 >>
当将类添加到当前幻灯片时,当前幻灯片应该是红色无聊颜色,但是它无法正常工作,它无法找到当前幻灯片(有时会查找一会儿),但问题出在哪里?
试图找到当前的幻灯片 div
并正确添加Class。
(Demo) Please see the Fiddle >>
Current slide should be red bored color when add class to current slide, but it's not working, it's unable to find current slide (some time Find for few moment), but where is the problem?
Trying to find current Slide div
and add Class properly.
更多信息:
这个JS很好,没有随机转换:demo http://jsfiddle.net/y7fap5dy/8/
但是当我添加了随机转换代码时,它无法将类添加到当前div。
请比较:
没有随机转换演示: http://jsfiddle.net/y7fap5dy/8/
随机转换演示: http://jsfiddle.net/y7fap5dy/7/ (无法将课程添加到当前div)
谢谢提前。
More Information:
This JS was good without random transition: demo http://jsfiddle.net/y7fap5dy/8/
But when I've added random transition code, it's unable to add class to current div.
Please compare:
Without random transition demo: http://jsfiddle.net/y7fap5dy/8/
Random transition demo: http://jsfiddle.net/y7fap5dy/7/ (unable to add class to current div)
Thanks in advance.
推荐答案
有2个问题:
first:您正在将类当前
应用于错误的 div
(对于最内在的,这就是为什么在随机过渡时有时只会影响一部分(最里面的图像)。
first: You are applying the class current
to the wrong div
(to the inner most), that is why at random transition sometimes only a part (the innermost image) is affected.
jssor的图像结构有很多嵌套的div,你需要上dom才能找到正确的div。
the image structure at jssor has a lot of nested divs, you need to go up the dom to find the correct div.
所以只需将你的变量currentDiv改为:
so just change your variable currentDiv to:
var currentDiv = currentImage.closest('#slider1_container').children("div");
这会在您的第一个嵌套 div
中找到jssor滑块,你想要你的班级当前
已添加。
this finds the first nested div
in your jssor slider, there you want your class current
added.
秒:按顺序要查看幻灯片更改后,您需要使用 $ EVT_STATE_CHANGE
查看 idleBegin
和 idleEnd
;不要使用 $ EVT_PARK
:
second: in order to find out once a slide is changing, you need to check with $EVT_STATE_CHANGE
for idleBegin
and idleEnd
; don't use $EVT_PARK
:
jssor_slider1.$On( $JssorSlider$.$EVT_STATE_CHANGE , function(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd){
// add 'current' class to slide
if(progress==idleBegin){
var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
var currentImage = allImages.eq(slideIndex);
var currentDiv = currentImage.closest('#slider1_container').children("div");
currentDiv.addClass("current");
}
// remove 'current' class from slide
else if(progress==idleEnd){
$(jssor_slider1.$Elmt).find(".current").removeClass("current");
}
});
检查更新的小提琴
这篇关于找到当前的幻灯片div并添加Class的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!