Question

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

它目前正在使用1按钮，但我不确定如何让数字2-4显示出来。 Here is the JSfiddle包含一些代码（下面有一些CSS）。我想我在逻辑上已经陷入困境。任何建议都会很棒。 What I currently have. 。 This is my sprite.

.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属性来向侧面移动精灵。使用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％使方块项目变圆..

麻烦使用精灵来分页jQuery滑块

1 个答案: