- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我在我的页面中使用了 jssor slider 。首先,我仅将 jssor slider 用于主横幅部分。稍后我想将此 slider 包含在另一个功能部分中。我复制了 jssor_1_slider_init = function()
并粘贴了 jssor_2_slider_init = function()
。但它不起作用。 如何在一个页面中包含两个独立的 jssor slider ? 第一个代码有效,第二个无效。
<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: true,
$AutoPlaySteps: 4,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$Cols: 4,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 4
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 1,
$SpacingY: 1
}
};
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, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
jssor_2_slider_init = function() {
var jssor_2_options = {
$AutoPlay: true,
$AutoPlaySteps: 4,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$Cols: 4,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 4
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 1,
$SpacingY: 1
}
};
var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_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, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;">
<?php
$query="select img, heading from slide_images order by id desc";
$result=$con->query($query)or die($con->error);
while($row=$result->fetch_assoc()){?>
<div id="non">
<img src="images/<?php echo $row['img'];?>" />
<div u="thumb"><?php echo $row['heading'];?></div>
</div>
<?php } ?>
</div>
</div>
<div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;">
<?php
$query="select img, heading from feature order by id desc";
$result=$con->query($query)or die($con->error);
while($row=$result->fetch_assoc()){?>
<div id="non">
<img src="images/<?php echo $row['img'];?>" />
<div u="thumb"><?php echo $row['heading'];?></div>
</div>
<?php } ?>
</div>
</div>
<script>
jssor_1_slider_init();
jssor_2_slider_init();
</script>
最佳答案
你有两个 id="jssor_1"但没有一个 id="jssor_2"的 div
关于javascript - 一页中有两个独立的 jssor slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45734772/
我在我的项目中制作了一个 jssor slider ,它运行良好。我已经决定将数据库添加到我的项目中,并且我想将图像地址保存到数据库中,这样我就可以将图像添加到 slider 中。 1.我的问题是可以
我想设置一个 slider 的格式,使文本标题出现在图像上方,按钮出现在下方。是否可以创建一个类似于所附屏幕截图的 slider ? 最佳答案 您可以在每张幻灯片中放置任何 html 代码,
我想设置一个 slider 的格式,使文本标题出现在图像上方,按钮出现在下方。是否可以创建一个类似于所附屏幕截图的 slider ? 最佳答案 您可以在每张幻灯片中放置任何 html 代码,
我正在尝试使用 Jssor slider 根据所选类别及其子类别显示不同的 HTML 内容。我成功地为一个子类别创建了内容 slider ,但我不知道如何销毁我当前的 slider 并使用 Ajax
我想将一个值从 JSSOR 的幻灯片传递到 DOM 的其他部分。 标记: Caption text JS: jssor_slider1.$On($JssorSlid
我想在 jssor 插件中的图像标签之外添加一个标题 Caption text 这样标题就不会覆盖图像 - 而是放在它下面。 (如何)这可能吗? 最佳答案 请使用“位置、顶部、左侧、宽度
有时照片纵横比与幻灯片容器不同,我看到照片会被拉伸(stretch)以填充所有容器空间。 有没有办法避免这种情况,使照片纵横比不改变?当然会有一些空白,但照片中的形状没有改变。 最佳答案 请设置 $F
有谁知道单击时 slider 控件中的每张幻灯片是否可以链接到 URL? 到目前为止,该控件对我来说非常棒,但是客户要求进行上述操作,但我看不到明显的方法。 非常感谢! 最佳答案 请使用以下代码定义带
我正在使用jssor 。我目前有一个带有缩略图和箭头的 slider 。 我想保留 2 个箭头,而不是图像,以显示与图像相关的文本和仅一个标签文本。类似于以下内容: 这可以从内部实现吗jssor ?
我有一个带有 jssor slider 的页面 car.asp,它包含在 index.asp 因此,当我直接加载页面 car.asp 时,箭头位于正确的位置 但是当我将此页面 car.asp 加载到另
我正在拼命尝试更改 jssor slider 中缩略图的类名。 我有以下代码: [+ic.propertyTitle+] · [+ic.property.price+] 变量[+ic.
我想实现一个 jssor 嵌套 slider 。 slider 已显示,但在我手动滑动第一个 slider 之前它不会自动播放。然后它就会以正常的自动播放模式开始。 此外,我在 Chrome 控制台中
我正在用 jssor 开发一个 slider 。字幕播放过渡和播放过渡效果很好,但在幻灯片过渡期间,字幕再次出现。我写了一个非常简单的例子,只有两张幻灯片,每张有一个标题,只是为了说明问题。这是 js
我正在尝试构建一个 jssor 图片库并让大多数东西正常工作,但我对 jssor 不是很精通,所以如果这是简单的添加,我深表歉意。 我有用于导航的黑白缩略图,当图像处于事件状态或悬停在静态图像上时,静
四处搜索,我只发现人们要么按高度缩放,要么按宽度缩放,我可以这样做,但我需要两者都做。 我的图库容器是按百分比设置的,但我认为这无关紧要。 基本上我希望我的 jssor 画廊根据它的容器尺寸进行调整。
我已经为我的问题寻找答案 3 天了,到目前为止还没有找到好的答案。 我找到的最接近的是这个 question但它对我不起作用。 我正在使用 jssor 画廊,我需要画廊按照示例链接中的描述工作 gal
我正在使用the Jssor library创建图像 slider 。我将 $FillMode 设置为 4,以便图像适合容器,但它不起作用。其中一张图像如下所示: 所以我尝试了所有其他模式,但没有看到
我正在尝试制作一个基于 Instagram feed 的 jssor 画廊。到目前为止,图像成功,但缩略图尚未成功。 var img = ''; var thumb = ''; $('#slide-'
有办法设置字幕转换输出的延迟吗? 我阅读了文档,但我没有注意到是否存在这种可能性。 我认为如果存在 $PlayOutMode: 3,应该有一个选项来设置过渡的延迟。 提前致谢 最佳答案 $AutoPl
我无法在 slider 中添加超过 6 个图像。如何增加显示的图像数量?当我将图像增加到 7 个时,第七个图像不起作用。 这是我正在使用的代码: jQuery(document).ready(func
我是一名优秀的程序员,十分优秀!