Jssor JS滑块下一个/上一个箭头位置

Jssor JS是一个轻量级的jQuery插件，用于创建响应式幻灯片，滑块和画廊等。可以使用Jssor JS添加下一个/上一个箭头来控制幻灯片滑块的轮播。在滑块的左侧和右侧，有两个小箭头，可以用来向前或向后滑动幻灯片。正常情况下，箭头会自动居中显示。如果需要改变箭头的位置，则可以按照以下步骤进行操作：

1. 在HTML文件中添加箭头的容器：

<div id="slider_container">
    <!--添加幻灯片滑块内容-->
    <div u="slides" ...>
        ...
    </div>

    <!--添加箭头容器和箭头-->
    <span u="arrowleft" class="jssora11l" ...></span>
    <span u="arrowright" class="jssora11r" ...></span>
</div>

在上面的代码中，我们添加了一个名为“slider_container”的父容器来保存幻灯片滑块和箭头。在滑块容器的下面，我们又添加了两个元素来容纳箭头。这两个元素分别定义了“jssora11l”和“jssora11r”类。这些类是Jssor JS库提供的预定义类，可用于添加箭头。

2. 定义箭头的样式：

在CSS文件中，我们可以定义箭头的样式。例如：

.jssora11l, .jssora11r {
    display: block;
    position: absolute;
    width: 37px;
    height: 37px;
    cursor: pointer;
    background: url(../img/a11.png) no-repeat;
    overflow: hidden;
}

.jssora11l {
    background-position: -10px -40px;
}

.jssora11r {
    background-position: -70px -40px;
}

.jssora11l:hover {
    background-position: -130px -40px;
}

.jssora11r:hover {
    background-position: -190px -40px;
}

在上面的代码中，我们定义了两个类“jssora11l”和“jssora11r”，它们共享一些相同的样式。它们的宽度和高度都设置为37像素，并设置了指针光标，表示箭头可以被单击。背景图像通过“background”属性加载，箭头图像是从网上下载的，并在本地存储。我们还为箭头定义了一些状态，例如当用户将鼠标移到箭头上时，箭头的背景图片会发生改变。

3. 调整箭头的位置：

此时，箭头的位置可能并不是理想的。我们可以将箭头通过“left”和“top”属性调整到合适的位置。例如：

.jssora11l {
    left: 12px;
    top: 123px;
}

.jssora11r {
    right: 12px;
    top: 123px;
}

在上面的代码中，我们使用“left”和“top”属性将左箭头的位置设置为“12像素”和“123像素”，右箭头的位置设置为“12像素”和“123像素”。我们还可以通过“right”和“bottom”属性设置箭头的位置。

总结：

添加箭头并调整它们的位置是一个简单的过程。只需在HTML文件中添加容器并在CSS文件中定义样式即可。通过Jssor JS提供的预定义类和属性，可以轻松地实现箭头的功能和位置调整。