javascript - 使用 sprite 对 jQuery slider 进行分页时遇到问题

Question

我正在使用 this jQuery slideshow plugin ，并尝试通过在圆圈中放置数字来自定义分页按钮。我最终制作了一个有 4 个圆圈的 Sprite 来做到这一点。

它目前适用于 1 按钮，但我不确定如何显示数字 2-4。 Here is the 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)
                })
            })
        }

Answer 1

问题是，您需要增加 background-position x 属性以将 Sprite 横向移动。使用 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 */

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

但如果我是你，我会将 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% 使方 block 元素变圆..