0

我正在使用这个 jQuery 幻灯片插件，并尝试通过将数字放在圆圈中来自定义分页按钮。我最终制作了一个带有 4 个圆圈的精灵来执行此操作。

它目前适用于 1 按钮，但我不确定如何显示数字 2-4。 这是带有一些代码的 JSfiddle（下面还有一些 CSS）。我想我在这一点上逻辑上卡住了。任何建议都会很棒。我目前拥有的。.这是我的精灵。

.slidesjs-pagination li a {
  display: block;
  width: 102px;
  height: 0;
  padding-top: 102px;
  background-image: url(img/buttons.png);
  background-position: 0 0;
  float: left;
  overflow: hidden;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
  background-position: 0 -102px;
}

.slidesjs-pagination li a:hover {
  background-position: 0 -204px;
}



/* Don't worry much about this jQuery, I found it in the plugin, it seems to be 
   producing the number based on how many images there are.  Although this isn't what 
   I want to do anymore, since I know I have 4 images. */


if (this.options.pagination.active) {
            i = e("<ul>", {
                "class": "slidesjs-pagination"
            }).appendTo(n);
            e.each(new Array(this.data.total), function (t) {
                var n, r;
                n = e("<li>", {
                    "class": "slidesjs-pagination-item"
                }).appendTo(i);
                r = e("<a>", {
                    href: "#",
                    "data-slidesjs-item": t,
                    html: t + 1
                }).appendTo(n);
                return r.click(function (t) {
                    t.preventDefault();
                    a.stop(!0);
                    return a.goto(e(t.currentTarget).attr("data-slidesjs-item") * 1 + 1)
                })
            })
        }
4

1 回答 1

1

问题是，您需要增加 background-position x 属性才能将精灵侧向移动。使用 css3 :nth-child() 选择器可以为您提供：

.slidesjs-pagination-item:nth-child(2) a {
    background-position: -102px 0 !important;
}
.slidesjs-pagination-item:nth-child(3) a {
    background-position: -204px 0 !important;
}
.slidesjs-pagination-item:nth-child(4) a {
    background-position: -306px 0 !important;
}

您还必须为活动状态和悬停添加规则

.slidesjs-pagination-item:nth-child(2) a.active,
.slidesjs-pagination-item:nth-child(2) a.:hover.active {
    background-position: -102px -102px !important;
}
.slidesjs-pagination-item:nth-child(2) a:hover {
    background-position: -102px -204px !important;
}
/* add rules for 3 and 4 */

更简单的 css 代码将使用 background-position-x 代替，但它不是标准 css。使用这意味着您不需要设置活动和悬停状态..

.slidesjs-pagination-item:nth-child(2) a {
    background-position-x: -102px !important;
}
/* add rules for 3 and 4 */

所有主流浏览器都支持 :nth-child() 选择器，除了 IE8 和更早版本。

但如果我是你，我会将 css 更改为此以获得相同的结果：

.slidesjs-pagination li a {
  display: block;
  width: 102px;
  height: 102px;
  float: left;
  overflow: hidden;
  background-color: lightgray;
  border-radius: 50%;
  text-align: center;
  color: white
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover {
  background-color: #59F
}

border-radius: 50% 使方形方块变成圆形..

于 2013-09-29T18:46:54.507 回答