Jassor滑块从滑块0开始播放
Jassor slider play from slide0
我有一个单页滚动网站。我使用的Jassor滑块有3-4张幻灯片可以自动播放,我想以某种方式制作href="#home"
或href="#"
,它可以到达页面顶部,滑块位于某个随机自动播放幻灯片上。是
当页面滚动到#home时,有什么方法可以重置为第一张幻灯片吗?
目前我的滑块代码看起来像这个
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
[{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 2000,
$FillMode: 2,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
function SliderParkEventHandler {
jssor_slider1.$PlayTo(0);
}
尝试从链接<a href="#home" onclick="return SliderParkEventHandler();">>Home</a>
调用函数SlideParkEventHandler
我的想法是创建一个调用$PlayTo(0)
的api
您可以在blackgoldconferences.com
您正在jssor_1_slider_init
内部初始化jssor_1_slider
,因此作用域将是本地的,不能从外部调用。
在全局范围内声明变量,以便您可以访问实例,使用该实例可以更改幻灯片
var jssor_1_slider;
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
[{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 2000,
$FillMode: 2,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
function SliderParkEventHandler {
jssor_slider1.$PlayTo(0);
}
相关文章:
- 如何使用videojs开始播放视频时不显示字幕
- Youtube无铬播放器 - 更改大开始播放按钮
- 视频通过javascript被隐藏,但已经开始播放(自动播放模式),即使是's不可见
- 知道何时从UIWebView中开始播放YouTube视频
- 控制 HTML5 视频中的开始位置和播放时长
- HTML5 视频在开始播放另一个视频时暂停使用 Javascript
- JQuery 自动收报机通过减速和停止然后重新开始来播放
- JQuery 从第二个零开始播放 html5 视频,但如果用户暂停视频,则保留当前帧
- 如何在单击图像时开始播放视频
- HTML5 视频 - 开始播放后无法加载资源错误
- 让HTML5视频在播放后自行重置为开始
- 在 JW 播放器开始之前不显示图像,如果 URL 包含字符串 base64
- 是否有JS功能可以使Brightcove智能播放器视频开始播放
- 如何更改暂停的 html5 视频的当前时间并从该位置开始播放
- Brightcove在Div可见时开始播放
- Jplayer不会在移动设备上自动开始播放
- 如何:YouTube API 在开始播放时触发 Javascript 事件
- 是否有可能通过跳过前 100 帧来使 SWIFFY 对象开始播放
- HTML5音频 - 当另一个声音开始时停止当前播放
- 当当前时间和开始时间(源标记中的startat属性)匹配时,我如何播放视频